css内边距和外边距

老鹏ｸﾞｯ!(๑•̀ㅂ•́)و✧

于 2023-01-03 17:21:28 发布

阅读量108

点赞数

分类专栏：前端文章标签：前端 css3

本文链接：https://blog.youkuaiyun.com/qq_47004770/article/details/128536098

版权

前端专栏收录该内容

17 篇文章

订阅专栏

文章讨论了在CSS布局中，当父子元素都设置有margin-top时出现的外边距塌陷问题，并提供了三种解决方案：1)使用透明边框；2)添加内边距；3)设置溢出隐藏。示例代码展示了如何应用这些方法来避免外边距塌陷。

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

1.外边距
（1）
请添加图片描述
（2）

（3）
（4）

嵌套的父子元素，两者都有margin-top，会产生塌陷的情况。在此，有三种解决方法如下：

<!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>Document</title>

    <style>
        .father {

            width: 400px;
            height: 400px;
            background-color: pink;
            /* 方法一：会增加父盒子的大小 */
            /* border: 1px solid transparent; */

            /* 方法二：会增加父盒子的大小 */
            /* padding: 10px; */

            /* 方法三： */
            /* overflow: hidden; */

        }

        .son {

            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top: 100px;

        }
    </style>

</head>

<body>

    <div class="father">
        <div class="son"></div>
    </div>
    
</body>

</html>

（5）

请添加图片描述