常见的 css 问题

时间 2019-11-18

标签常见的 css 问题栏目 CSS 繁體版

原文原文链接

###一、空白边叠加问题this

<body>
    <div class="box">
        <p>this pragraph has a 20px margin</p>
    </div>
</body>

.box{margin: 10px; background: #d5d5d5; width: 300px;}
p{margin: 20px; background: #6699FF; border:1px solid #e33030;}

咱们的本意是让 box 显示10像素的空白边，段落显示20像素的空白边spa

可是实际效果如图：code

这里发生了两个状况：图片

1.段落的20px 空白边和 div 的10px 空白边叠加，造成一个单一的20px 垂直空白边。it

2.这些空白边不是被 div 包围的，而是突出到 div 的顶部和底部的外边。class

出现这种状况是因为具备块级子元素的元素计算其高度的方式形成的。（若是元素没有垂直边框或填充，那么他的高度就是它包含的子元素的顶部和底部边框边缘之间的距离。所以，包含的子元素的顶部和底部空白边突出到容器元素的外边。）容器

解决办法：经过添加一个垂直边框或者填充，空白边就再也不叠加了，并且元素的高度就是它包含的子元素的顶部和底部空白边缘之间的距离。方法

方法一：im

.box{margin: 10px; background: #d5d5d5; width: 300px; **padding: 1px;**}
 p{margin: 20px; background: #6699FF; border:1px solid #e33030;}

方法二：margin

.box{margin: 10px; background: #d5d5d5; width: 300px; border: 1px solid transparent;}
p{margin: 20px; background: #6699FF; border:1px solid #e33030;}

空白边叠加的很少数问题能够经过添加透明的边框或1px 的填充来修复