重庆分公司

咨询热线：

028-86922220

关于我们

服务项目

小程序开发

案例展示

建站动态

联系我们

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

重庆分公司，新征程启航

为企业提供网站建设、域名注册、服务器等服务

关于css布局中margin，padding在整个布局中使用的一些细节-创新互联

最近在学习写网页，在用html标记语言和css布局时，发现css布局中的margin，padding会使整个布局变大，最后在研究了css盒模型时找到了答案。

独山子ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：13518219792（备注：SSL证书合作）期待与您的合作！

主要原因是margin定义了模块的外边距，padding定义了模块的内边距，如果在布局时没有把两块边距像素考虑到整个布局中，并且在父布局里宽高都设置为固定，此时会发生的事情就是：在整个父布局中如果宽度容纳不下子布局，那么子布局会撑出整个父布局，例如：

布局如上，container为父布局，其余全部为子布局，当我的子布局header设置的宽度超过container设置的宽度时，代码如下：

    #container{
		width: 820px;
		height: auto;
		background: white;
		margin:0 auto;
		background: yellow;
	}
	#header{
		width: 840px;
		height: 50px;
		background: green;
		margin: 10px 0px 0px 10px;
	}

会发生如下情形：

关于css布局中margin，padding在整个布局中使用的一些细节

可以看到绿色的部分已经超出了***部分，如果并排的两个子布局总宽度超过了父布局的宽度，则会发生右边的布局会自动排到左边布局的下面，代码如下：

        #left{
		width: 200px;
		height: 200px;
		background: red;
		float: left;
		margin: 10px 10px;
	}
	#rigt{
		width: 600px;
		height: 200px;
		background:blue;
		float: left;
		margin: 10px 10px;
	}

这里左布局宽度200px，右布局宽度600px，加上margin的边距一共是830px，超过了父布局的820px，所以出现的情形是这样的：

关于css布局中margin，padding在整个布局中使用的一些细节