CSS：margin 和 padding

最新推荐文章于 2023-08-27 18:37:49 发布

Bridge_go

最新推荐文章于 2023-08-27 18:37:49 发布

阅读量242

点赞数

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/breakbridge/article/details/107234337

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

margin

设置元素的外边距。

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

margin: 5px; 使用一个值，这个值就会应用于全部四个边。
margin: 5px 9px; 使用两个值，则前一个值会应用于上下两边，后一个值会应用于左右两边。
margin: 5px 9px 11px; 使用三个值，则第一个值会应用于上边，第二个值会应用于左右两边，第三个值会应用于下边。
margin: 5px 9px 11px 10px; 使用四个值，它们会按照顺时针（从上开始），依次应用于上、右、下、左四个边。

PS：margin也存在单独的属性设置各边边距。 margin-top (上外边距)，margin-right (右外边距)，margin-bottom (下外边距)，margin-left (左外边距)

提示：如果元素位于另一个元素的上面，对于相互接触的两个 margin（即元素相互接触的下外边距和上外边距），仅使用其中较大的一个，另一个外边距会被叠加。左右外边距不叠加。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body { background-color: burlywood; }
        p.ex1 { background: yellow; }
        p.ex2 { margin: 10px; background: yellow; }
    </style>
</head>
<body>
    <p class="ex1">使用默认外边距，默认为：auto</p>
    <p class="ex2">各边都添加 10px 的外边距</p>
</body>
</html>

padding

设置元素内边距。

同margin一样，简写属性设置相同，也存在单独设置的属性。 padding-top (上内边距)，padding-right (右内边距)，padding-bottom (下内边距)，padding-left (左内边距)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body { background-color: burlywood; }
        p.ex1 { background: yellow; }
        p.ex2 { padding: 10px; background: yellow; }
    </style>
</head>
<body>
    <p class="ex1">使用默认内边距，默认为：auto</p>
    <p class="ex2">各边都添加 10px 的内边距</p>
</body>
</html>

理解内边距和外边距的 em 值：
当 em 值用于内边距和外边距时，它的值是相对于元素的字体大小的，而不是相对于父元素的字体大小的。设想一个简单的例子，其中的段落定义了 p { font-size: 14px; padding: .5em; }。那么，它在四个边的内边距都是 7 像素，因为 7/14 = 0.5。如果将字体大小改为 20px，内边距就会自动变成 10 像素（10/20 = 0.5）。这就是 em 这样的相对单位的作用：随着布局放大或缩小，布局的比例始终不变。
这里需要指出一条简短的说明：如果要对内边距和外边距使用百分数，通常不会将它们用于上下边距的值，因为这样的值是基于其包含块的宽度的。

Bridge_go

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS：margin 和 padding

margin设置元素的外边距。 margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。margin: 5px; 使用一个值，这个值就会应用于全部四个边。 margin: 5px 9px; 使用两个值，则前一个值会应用于上下两边，后一个值会应用于左右两边。 margin: 5px 9px 11px; 使用三个值，则第一个值会应用于上边，第二个值会应用...
复制链接

扫一扫