1、8外边距合并

这一片月

已于 2022-10-23 15:50:23 修改

阅读量170

点赞数 1

分类专栏： css样式文章标签： html css 前端

于 2022-10-23 15:41:48 首次发布

本文链接：https://blog.csdn.net/qq_62865634/article/details/127475450

版权

css样式专栏收录该内容

41 篇文章 1 订阅

订阅专栏

提示：文章写完后，使用margin块元素垂直外边距，可能合并。

注意：嵌套块元素垂直外边距塌陷

对于两个嵌套关系（比如：父子嵌套）块级元素，在父类元素设置外边距在去子盒子设置就会有塌陷。

1、语法：

div{

border：1px solid red；

padding：1px；

overflow：hidden；

}

解决方案塌陷：

border：1px solid red；

表示：外边框：外边框粗细（单位像素）、外边框实线、外边框颜色

padding：1px；

表示：内边距:上下左右都为1像素的内边距

overflow：hidden；

表示：多余部分隐藏

自己代码展示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框坍陷：意思就是当我们给父类设置margin向下时候、在给子类设置margin时候我们父类也坍塌</title>
    <style>
        .nav {
            width: 900px;
            height: 400px;
            background-color: red;
            /* border: 1px solid red; */
            /* 第一种方法：就是设置边框border，设置1像素、实线、红色 */
            /* padding: 1px; */
            /* 这个是第二种方法：就是设置父类内边距 */
            overflow: hidden;
            /* 这个就是第三种方法 */
            /* 解释：
            就是当我们在设置盒子套盒子时候、我们要移动位置、这个时候无论你是设置子类margin-top向上外边框距离时候都会只移动父类
            这个时候我们要用三种方法
            第一个是：border边框在父类写、而外边距在子类写
            第二个是：padding内边距
            第三个是：overflow：“hidde” */
        }
        
        .zx {
            width: 100px;
            height: 50px;
            background-color: pink;
            margin-top: 100px;
        }
    </style>

</head>

<body>
    <div class="nav">
        <div class="zx"></div>
    </div>

</body>

</html>