内边距padding详解以及外边距margin详解(外边距垂直塌陷,垂直外边距合并)+行内元素的padding和margin是否有效

最新推荐文章于 2022-12-21 11:06:34 发布

杏黄的三叶草

最新推荐文章于 2022-12-21 11:06:34 发布

阅读量598

点赞数

分类专栏： Web前端CSS

本文链接：https://blog.csdn.net/dwjdj/article/details/104065607

版权

Web前端CSS 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

内边距padding

内容与边框之间的距离

**注意:padding不会改变标签内容的大小(元素的位置)，只能改变元素中内容区域的位置(我们平常设置的宽高实际上就是标签内容区域的大小)。

语法和border属性一样
padding-top:上内边距
padding-bottom:下内边距
padding-right:右内边距
padding-left:左内边距
padding的取值可以为auto自动(默认)，不同单位的数值，相对于父元素宽度的百分比，一般为像素值px(不可以取负数)
```**
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200121213354173.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3amRq,size_16,color_FFFFFF,t_70)
# 盒子的实际大小
###### 盒子实际大小=内容区域大小+边框+内边距
总结：
1.如果一个盒子没有设置边框和内边距，那么该盒子在浏览器中的事件大小就是其内容区域的大小。
2.如果一个容器设置了宽度和高度，同时又设置了内边距和边框，要想保证当前盒子大小不变，要在内容区域做减法操作。
# 外边距(margin)
##### 盒子与盒子之间的距离(和padding属性的用法一样，不能够取负值)
margin:
改变盒子的位置但不会改变元素的大小
##### 能够使块级元素水平居中
margin:0 auto;

margin的特点：

1.垂直外边距合并：(在垂直方向，外边距以最大值为准，不会进行叠加，水平方向会)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .one {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 100px;
        }

        .two {
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 200px;
        }

    </style>
</head>
<body>
<div class="one"></div><div class="two"></div>
</body>
</html>

2.外边距垂直塌陷：如果给子元素设置margin-top值的时候，会发现父元素也跟着向下移动了。
解决方法：
◆给父元素设置边框
◆给父元素设置overflow：hidden;
◆让子元素或者父元素脱标（浮动，绝对定位，固定位定位）

overflow: hideen 可以触发元素的bfc
bfc: 元素在文档流中独立的一块区域;


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">



        .one {
            width: 200px;
            height: 200px;
            background-color: red;
             /*border: 1px solid red;*/
            /* overflow: hideen 可以触发元素的bfc/脱离了标准文档流，使其拥有一块独立的区域
               bfc: 元素在文档流中独立的一块区域;
            */
            overflow: hidden;

        }
        .two {
            width: 50px;
            height: 50px;
            background-color: pink;
            margin-top: 100px;
        }
    </style>
</head>
<body>

<div class="one">
    <div class="two"></div>
</div>
</body>
</html>

行内标签（也叫内联标签）的padding和margin左右设置有效，而padding上下有显示效果，但是设置无效，margin上下也是设置无效，显示也无效。

padding的灵活使用

☞总结：
 ◆如果一个元素没有设置宽度或者高度，那么给该元素设置padding值的时候，不需要考虑盒子大小的改变（宽度和高度默认为父标签的宽度和高度）
 ◆不能给行内元素设置上下内外边距

杏黄的三叶草

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
内边距padding详解以及外边距margin详解(外边距垂直塌陷,垂直外边距合并)+行内元素的padding和margin是否有效

内边距padding内容与边框之间的距离**注意:padding不会改变标签内容的大小(元素的位置)，只能改变元素中内容区域的位置(我们平常设置的宽高实际上就是标签内容区域的大小)。语法和border属性一样padding-top:上内边距padding-bottom:下内边距padding-right:右内边距padding-left:左内边距padding的取值可以为auto自...
复制链接

扫一扫