css 空白外边距相互之间叠加的处理方式

2021-03-12 23:04 jianzhan
先看以下demo编码:

提醒:您能够先改动一部分编码再运作

这是1个div元素嵌入套p的简易样例,先别拷贝储存为html检测,在你看完上面的编码后,你是不是认为它出为你展现以下图的实际效果?


好,如今你能够拷贝上面编码,储存到当地,随后在访问器中开启.你会诧异的发现,它展现给你的实际效果是这样的:

为何会这样呢?按CSS中,针对有块级子元素的元素测算高宽比的方法,假如元素沒有竖直边框和填充,那其高宽比便是其子元素顶部和底部边框边沿之间的间距.故,子元素的顶部和底部空白边就突显到元素的外围了.p元素的15px外边距与div元素的10px的外边距产生1个单1的15px竖直空白边,此外,方式的这个空白边并不是为div所包围着,而是展现在div的外围.因此,大家看到了第2张实际效果图.
怎样处理?自己较为强烈推荐两种处理方法:
其1,为外围元素界定全透明边框.实际到本例,即在款式div中添加border:1px solid transprent;
其2,为外围元素界定内边距填充..实际到本例,即在款式div中添加padding:1px
此外,还能够根据外围元素肯定精准定位,或界定子元素波动等方法完成.