最好只在文本元素上使用边距而不是布局元素吗?

时间:2010-11-11 11:02:30

标签: html css

我不得不处理由其他人编写的项目,以及他们编写网站的方式,所有内容都使用边距定位,包括正边距和负边距。

我只对<p><h1>标签等文字元素使用边距。

使用填充来分隔我的div构建块中的内容。

当在div上使用margin来尝试控制它们的间距时,我遇到了很多问题。

所以我的问题是:

最佳做法是仅在文本元素上使用边距,并在主要构建块上使用填充,除非在特定情况下使用边距更有意义吗?

我对其他人对margin属性及其用途的看法感兴趣。

它是否引起了其他人的问题?

3 个答案:

答案 0 :(得分:3)

CSS margin属性应该用于设置框之间的间隙,而不是将文本(内容)放在某个框内,而不是改变框的位置。对于这两项活动中的每项活动,都有特定属性:paddingpositionleftrighttopbottom)。< / p>

确定您需要哪些属性非常简单。让我们来看看:

一个。 我在父级中有3列,我希望它们之间有一些空格。
这将需要使用margin,因为您显然需要元素之间的空间,而不是它们内部。

B中。 每个列都有边框和文本内容,但文本内容从边框开始。我该怎么办?
您申请了一些padding。即使您没有边框并且想要定位文本内容,您仍然应用填充,而不是保证金!

℃。 我想制作一些很酷的未来派布局,盒子彼此不对齐。其中一些甚至应该重叠!
在这种情况下,它显然不是间距问题,而是定位问题,所以你应该使用你已经猜到的position属性。不要将空格元素相互应用于空格元素,而是将位置相对于父元素(或者如果使用position: relative则设置为默认位置)。

提示:为了更容易确定您是否需要保证金或填充,请始终考虑如果您的所有元素都有边框,您会怎么做。

强制性阅读:http://www.w3.org/TR/CSS2/box.html

答案 1 :(得分:2)

边距用于在两个元素之间创建空格,而填充用于分隔元素相对于边缘的内容。

更新:我使用短划线( - )来表示空格。

所以这是保证金......

- |元素| - |元素| -

这是填充......

| -Element- || -Element- |

这是保证金和填充......

- | -Element- | - | -Element- | -

所以问题是,你想用什么...答案是它取决于。如果元素有可见边缘,无论是背景颜色还是边框,填充都不会在元素之间产生可见的间隙,因此您必须使用边距来分隔它们(即阻止边缘接触)。

基本上,它们做了不同的事情,你应该使用边距来填充空间元素,并使用填充来创建元素边缘与其内容之间的间隙。

答案 2 :(得分:0)

回答你的问题:没有。您的主要构建块可能使用浮动布局,使用负边距可以保持合理的源顺序 - 请参阅http://www.alistapart.com/articles/negativemargins/