深入学习CSS中Margin和Padding属性用法

最新推荐文章于 2022-06-02 18:31:52 发布

转载最新推荐文章于 2022-06-02 18:31:52 发布 · 995 阅读

文章标签：

#css

Web 专栏收录该内容

5 篇文章

订阅专栏

本文详细解析CSS中的Margin和Padding属性的用法，包括它们如何隔开元素，以及在不同浏览器下的显示差异。通过实例展示如何设置元素的margin和padding，并讨论在浮动元素时IE6中margin加倍的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

软网提示：CSS中的Margin和Padding属性有很多值得学习的地方，这里和大家分享一下Margin和Padding属性的用法，margin和padding用来隔开元素
CSS中的Margin和Padding属性有很多值得学习的地方，这里和大家分享一下Margin和Padding属性的用法，margin和padding用来隔开元素，margin是隔开元素与外边，padding是隔开元素里边。

详细学习CSS的Margin和Padding属性

margin和padding用来隔开元素，margin是隔开元素与外边，padding是隔开元素里边。

例子h2：

h2{ font-size:1.5em;
background-color:#ccc; margin:1em;
padding:3em; }

元素四边可以设置的属性：margin-top,margin-right,margin-bottom,margin-left,padding-top,padding-right,padding-bottomandpadding-left

CSS盒模型BoxModel

width和height定义的是Content部分的宽度和高度，paddingbordermargin的宽度依次加在外面。背景会填充padding和content部分。但是由于浏览器设计上的问题，不同浏览器显示效果会有些不同。左右Margin加倍的问题当box为float时，IE6中box左右的margin会加倍

W3C定义的盒模式如下：

width和height定义的是Content部分的宽度和高度，paddingbordermargin的宽度依次加在外面。背景会填充padding和content部分。

但是由于浏览器设计上的问题，不同浏览器显示效果会有些不同。

左右Margin加倍的问题

当box为float时，IE6中box左右的margin会加倍。比如：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
<head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>www.webjx.com</title> <style>
.outer{ width:500px;
height:200px; background:#000;
} .inner{
float:left; width:200px;
height:100px; margin:5px;
background:#fff; }
</style> </head>
<body> <divclassdivclass="outer">
<divclassdivclass="inner"></div> <divclassdivclass="inner"></div>
</div> </body>
</html>
左面的inner的左面margin明显大于5px。
这时候，定义inner的display属性为inline。

CSS中padding和margin属性用法说明实例解析CSS中padding、margin两个重要属性用法 CSS padding属性定义边内补白方法探究 IE6下使用CSS定义DIV高度行之有效的办法技术前沿一段JS代码轻松解决IE6-IE8的兼容性问题