css 空白外边距互相叠加的解决方法
发布时间：2010-07-04 17:15:09 作者：佚名 
我要评论
我要评论空白双边距是一个极容易误解的CSS特性.它不是CSS的bug,但如果我们一旦误解,将会给你带来很多麻烦.
先看如下demo代码:
提示：您可以先修改部分代码再运行
这是一个div元素内嵌套p的简单样例,先别复制保存为html测试,在你看完上面的代码后,你是否以为它出为你呈现如下图的效果?
好,现在你可以复制上面代码,保存到本地,然后在浏览器中打开.你会惊讶的发现,它呈现给你的效果是这样的:
为什么会这样呢?按CSS中,对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离.故,子元素的顶部和底部空白边就突出到元素的外围了.p元素的15px外边距与div元素的10px的外边距形成一个单一的15px垂直空白边,另外,形式的这个空白边并非为div所包围,而是呈现在div的外围.所以,我们看到了第二张效果图.
如何解决?本人比较推荐两种解决方式:
其一,为外围元素定义透明边框.具体到本例,即在样式div中加入border:1px solid transprent;
其二,为外围元素定义内边距填充..具体到本例,即在样式div中加入padding:1px
另外,还可以通过外围元素绝对定位,或者定义子元素浮动等方式实现.
提示：您可以先修改部分代码再运行
这是一个div元素内嵌套p的简单样例,先别复制保存为html测试,在你看完上面的代码后,你是否以为它出为你呈现如下图的效果?
好,现在你可以复制上面代码,保存到本地,然后在浏览器中打开.你会惊讶的发现,它呈现给你的效果是这样的:
为什么会这样呢?按CSS中,对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离.故,子元素的顶部和底部空白边就突出到元素的外围了.p元素的15px外边距与div元素的10px的外边距形成一个单一的15px垂直空白边,另外,形式的这个空白边并非为div所包围,而是呈现在div的外围.所以,我们看到了第二张效果图.
如何解决?本人比较推荐两种解决方式:
其一,为外围元素定义透明边框.具体到本例,即在样式div中加入border:1px solid transprent;
其二,为外围元素定义内边距填充..具体到本例,即在样式div中加入padding:1px
另外,还可以通过外围元素绝对定位,或者定义子元素浮动等方式实现.
相关文章
这篇文章主要介绍了解决margin 外边距合并问题 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-07-03- 这篇文章主要介绍了详解CSS外边距折叠引发的问题的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-27
外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距，本文详细的介绍了一下css外边距折叠的实现，分为3种情况，非常具有实用价值，需要的朋友可以参考下2018-10-30- 本篇文章主要介绍了详解css边距重叠的几种解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-06
- 这篇文章主要介绍了简单的CSS叠加外边距示例,是文档样式编写中一个需要注意的地方,需要的朋友可以参考下2015-07-21
- 这篇文章主要介绍了css控制边界与边框示例,需要的朋友可以参考下2014-04-15
- 今天就先说说CSS的外边距吧。 围绕在元素边框的空白区域是外边距。这是W3CSchool给我们的解释。这句话看起来很模糊，说的不是那么明确2012-05-27
- 网页制作Webjx文章简介：今天谈谈CSS外边距叠加的问题，边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 在进行CSS网页布局时会遇到2009-04-02
这篇文章主要介绍了CSS 外边距(margin)重叠及防止方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-08-14
最新评论