您的位置：首页 > Web前端 > > 正文

css的内外边距均设置为0（详解css边距重叠的几种解决方案）

更多时间：2022-01-28 01:48:04 类别：Web前端浏览量：2840

css的内外边距均设置为0

详解css边距重叠的几种解决方案

今天整理了一下用css防止边距重叠的几种方法

先假设一组dom结构

<li class="parent">
    <li class="child">
    </li>
</li>

通常情况下，如果给子元素设置margin,就会产生这个属性对父元素也产生了同样的效果，然而

这其实不是我们想要的结果，我们只想对子元素设置margin，那么现在我们应该怎么做呢？

（1）给父元素设置边框

.parent { 
    width: 300px;       
    height: 300px;
    border: 1px solid #ccc;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

（2）给父元素添加padding

.parent {
    padding： 1px;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

（3）在子元素上方加一个有宽高的兄弟元素，记住是有宽高的。

<li class="parent">
     <li style="width: 20px;height: 20px;margin-top: "></li>
     <li class="child">
     </li>
</li>

（4）给父元素设置 overflow: hidden; 属性

.parent {
    overflow: hidden;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

（5）给子元素设置 display: inline-block；（如果子元素是行内元素或者行内块级元素则不会产生边距重叠的问题）

.parent {
    width: 300px;
    height: 300px;
} 
.child {
    width: 200px;
    height: 200px;
    margin: 20px; 
    display: inline-block;
}

（6）使子元素脱离文档流这个实现的方法有很多，浮动，绝对定位等，这里我就不做具体的解释了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持开心学习网。

标签：重叠边距 css

上一篇：dedecms更改主页模板（dedecms首页调用专题页描述和链接的实现方法）

下一篇：thinkphp怎么输出二维值（thinkphp 表名大小写窍门）

您可能感兴趣

css的内外边距均设置为0（详解css边距重叠的几种解决方案）

css的内外边距均设置为0

热门推荐

排行榜