共计 2813 个字符，预计需要花费 8 分钟才能阅读完成。
这篇文章主要介绍“CSS 的 padding 和 margin 属性怎么使用”的相关知识，丸趣 TV 小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS 的 padding 和 margin 属性怎么使用”文章能帮助大家解决问题。
CSS 中 padding、margin 两个重要属性的详细介绍及举例说明
注: 为什么不翻译 margin 和 padding? 原因一, 在汉语中并没有与之相对应的词语; 原因二: 即使有这样的词语, 由于在编写 CSS 代码时, 必须使用 margin 和 padding, 如果我们总用汉语词语代替其来解释的话, 到了实际应用时容易混淆 margin 和 padding 的概念。
以下说明 margin 和 padding 属性：
1. Margin: 包括 margin-top, margin-right, margin-bottom, margin-left, 控制块级元素之间的距离, 它们是透明不可见的, 对于 Fig. 2 所示的上右下左 margin 值均为 40px, 因此代码为:
margin-top: 40px; margin-right: 40px; margin-bottom: 40px; margin-left: 40px;根据上, 右, 下, 左的顺时针规则, 简写为
margin: 40px 40px 40px 40px;当上下, 左右 margin 值分别一致, 可简写为:
margin: 40px 40px;前一个 40px 代表上下 margin 值, 后一个 40px 代表左右 margin 值.
当上下左右 margin 值均一致, 可简写为:
margin: 40px;2. Padding: 包括 padding-top, padding-right, padding-bottom, padding-left, 控制块级元素内部, content 与 border 之间的距离, 其代码, 简写请参考 margin 属性的写法.
至此, 我们已经基本了解 margin 和 padding 属性的基本用法. 但是, 在实际应用中, 却总是发生一些让你琢磨不透的事, 而它们又或多或少的与 margin 有关.
注: 当你想让两个元素的 content 在垂直方向 (vertically) 分隔时, 既可以选择 padding-top/bottom, 也可以选择 margin-top/bottom, 再此 Jorux 建议你尽量使用 padding-top/bottom 来达到你的目的, 这是因为 CSS 中存在 Collapsing margins(折叠的 margins)的现象.
Collapsing margins: margins 折叠现象只存在于临近或有从属关系的元素, 垂直方向的 margin 中. 文字说明可能让人费解, 下面用一个例子说明 margin-collapsing 现象.
例: 在 html 文件的之间写入如下代码:
div id=”ID1″ h2 id=”ID2″ Margins of ID1 and ID2 collapse vertically. br/ 元素 ID1 与 ID2 的 margins 在垂直方向折叠.h2 div在与其外联的 CSS 文件中写入:
* { padding:0; margin:0; } #ID1 { background-color: #333; color: #FFF; margin-top: 10px; margin-bottom: 10px; } #ID2 { font: normal 14px/1.5 Verdana, sans-serif; margin-top: 30px; margin-bottom: 30px; border: 1px solid #F00; }代码解释:
1. 在 html 写入的代码表示, 在 html 中插入 id 分别为 ID1 和 ID2 的两个块级元素 div, h2;
2. *{padding:0; margin:0;}: 使浏览器默认的元素 padding 和 margin 值均归零;
3. #ID1{…}: 使 id 为 ID1 的元素 div 的背景颜色为 #333, 字体颜色为 #FFF, margin-top/bottom 为 10px;
4. #ID2{…}: 使 id 为 ID2 的元素 h2 的字体大小为 14px, verdana 字体, 行高为字体高的 150%, 正常粗细. margin-top/bottom 为 30px, 边框为 1px 宽, 红色实线.
依据以上解释, 我们应该得到如下效果(Fig. 3):
即 ID1 的 margin-top/bottom=ab=ef=10px;
ID2 的 margin-top/bottom=bc=de=30px;
但用浏览器打开 html 文件, 却得到 Example4 的效果, 如下图(Fig. 4):
即 ab=cd=30px, ID1 的 margin-top/bottom=10px 被折叠了, 而且 ID1 应有的 margin 黑色背景也一同被折叠消失了。
◆为什么会折叠:
造成以上现象的原因是, 我们在 CSS 中并没有声明 id 为 ID1 的元素 div 的 height(高), 因此它的高便被设为 auto(自动)了. 一旦其值被设为 auto, 那么浏览器就会认为它的高为子元素 ID2 的 border-top 到 border-bottom 之间的距离, 即 Fig. 4 中 bc 的长度, 所以子元素 ID2 的 margin-top/bottom(30px)就伸出到了父元素 ID1 之外, 出现了 Fig. 4 中 ab 与 cd 之间的空白区域. 因此父元素 ID1 的 margin-top/bottom 因子元素的”红杏出墙”而被折叠消失了.
如何解决折叠问题: 可能大家最初想到的办法就是根据折叠发生的原因—auto, 来解决问题. 但是, 在实际操作中, 某些元素如 div, h2, p 等, 我们是不可能预先知道它的高是多少的, 因此在 CSS 文件中是不能常规通过声明元素的高来解决折叠问题.
我们需要在 CSS 文件中加入如下代码(红色部分):
#ID1 { background-color: #333; color: #FFF; margin-top: 10px; margin-bottom: 10px; padding-top:1px; padding-bottom:1px; }或是：
#ID1 { background-color: #333; color: #FFF; margin-top: 10px; margin-bottom: 10px; border-top:1px solid #333; border-bottom:1px solid #333; }通过增加以上代码, 便可使浏览器重新计算 ID1 的高, 使其为子元素 ID2 的 margin-top/bottom 外缘 (outer top/bottom) 之间的距离, 即 Fig. 3 中 be 的距离.
关于“CSS 的 padding 和 margin 属性怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注丸趣 TV 行业资讯频道，丸趣 TV 小编每天都会为大家更新不同的知识点。
