首页 > CSS问题:为什么<p>会自动生成外边距?

CSS问题:为什么<p>会自动生成外边距?


如上图。

请各位前辈指教,谢谢!


为什么说有权限狗?咬人了?


因为对于普通流(normal flow)中的块级元素,以下等式总是成立:

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 包含块宽度

包含块(containing block)宽度也就是父元素内容区的宽度。

当左边几个值加起来与右边不等时,就会忽略其中一个 margin,具体来说当 direction 属性为 ltr 时,忽略 margin-right 并且重新根据等式计算出一个 margin-right,这个值是应用值(used value)。如果 directionrtl,重新计算 margin-left

不同意 @krew 的说法,剩下 30% 恰恰就是外边距,这是等式计算的结果。Chrome 用橙色来表示 margin,从图上看得很清楚嘛。

参考:10.3.3 Block-level, non-replaced elements in normal flow


浏览器兼容性问题。


因为p是块级元素,占据父级宽度下整行的宽度,你给他加上宽度70%,剩下的30%,其实不是外边距,只是填充满整个父级宽度的颜色而已了。
你看盒模型图就知道了。

盒模型图
实际上是没有右边距的。


学会清零


看你截图,你做了

*{margin:0;padding:0;}

首先说下,这样做不太好,这样做css reset的效率极其低下,然后你的截图只给出了style样式,根本无法得知,你真正的样式什么,你至少给出一个computer style的截图吧,最好把自己做的页面,链接给出来,好帮你看问题
然后,根据你的描述,应该不是p自动产生外边距的,应该是某种原因,引起的填充色溢出,或者和display相关的问题,最好把你的代码完整的贴出来,或者给出调试链接
最后说明下,

print ("这里只是一个权限狗的乐园");
print ("技术问题还是去 stackoverflow.com 吧")

你这样提问,很难得到有效的回答的,今天晚上尽可能的帮助别人,以后也不来了


其实很多标签默认的一些属性如 p,ul,h1 等
你可以使用chrome 插件来查看他们的默认属性

所以如果你不需要这个属性可以,先初始化他们的数据,

body,p,ul{
    margin:0;
    padding:0;
}

可以用yahoo的 reset,
或者
可以参考大型网站的reset。

【热门文章】
【热门文章】