清除子元素margin导致的父元素边距异常

最新推荐文章于 2023-04-17 15:26:02 发布

侠之大者为国为民

最新推荐文章于 2023-04-17 15:26:02 发布

阅读量1.9k

点赞数

分类专栏： css 文章标签： html css

css 专栏收录该内容

6 篇文章

订阅专栏

本文通过一个简单的HTML和CSS实例展示了如何使用CSS伪元素:before来优化页面布局。具体地，该示例展示了一个带有灰色背景的盒子，并在盒子内部通过设置子元素的外边距来调整内容位置。

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

<html>

<head>
    <style>
        *{margin:0;padding:0}
        .box {
            background-color:gray;
            
            
        }
        
        .box:before{
            display: table;
            content: '';
        }
    </style>
</head>

<body>
    <div class="box">
        <div style="margin-top:10px">子元素</div>
    </div>
</body>

</html>