详解css边距重合的几种处理计划方案

日期：2021-01-20 类型：科技新闻 

关键词：快速建站，网站建设系统，免费网页建站，网站免费建设，建站系统

今日梳理了1下用css避免边距重合的几种方式

先假定1组dom构造

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

一般状况下，假如给子元素设定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）在子元素上方加1个有宽高的弟兄元素，记牢是有宽高的。

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

（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 盒实体模型 文本文档流 几种消除波动的方式 返回下一篇：没有了