CSS中Margin的注意问题

最新推荐文章于 2024-04-15 19:17:28 发布

会过敏的企鹅

最新推荐文章于 2024-04-15 19:17:28 发布

阅读量754

点赞数 1

分类专栏：前端文章标签： HTML CSS

本文链接：https://blog.csdn.net/qq_43623306/article/details/90474262

版权

本文详细介绍了CSS中关于Margin的三个常见问题：同级元素的外边距塌陷，嵌套元素的外边距传递，以及如何利用外边距实现元素的自动挤压和居中效果。通过实例和解决方案，帮助开发者理解并解决这些问题。

摘要由CSDN通过智能技术生成

Margin中有三种问题

一、同级塌陷谁小塌陷到大的里面

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin-bottom: 30px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            margin-top: 30px;
        }

    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

如图所示：<