我不得不处理由其他人编写的项目,以及他们编写网站的方式,所有内容都使用边距定位,包括正边距和负边距。
我只对<p>
或<h1>
标签等文字元素使用边距。
使用填充来分隔我的div构建块中的内容。
当在div上使用margin来尝试控制它们的间距时,我遇到了很多问题。
所以我的问题是:
最佳做法是仅在文本元素上使用边距,并在主要构建块上使用填充,除非在特定情况下使用边距更有意义吗?
我对其他人对margin属性及其用途的看法感兴趣。
它是否引起了其他人的问题?
答案 0 :(得分:3)
CSS margin
属性应该用于设置框之间的间隙,而不是将文本(内容)放在某个框内,而不是改变框的位置。对于这两项活动中的每项活动,都有特定属性:padding
和position
(left
,right
,top
,bottom
)。< / p>
确定您需要哪些属性非常简单。让我们来看看:
一个。 我在父级中有3列,我希望它们之间有一些空格。
这将需要使用margin
,因为您显然需要元素之间的空间,而不是它们内部。
B中。 每个列都有边框和文本内容,但文本内容从边框开始。我该怎么办?
您申请了一些padding
。即使您没有边框并且想要定位文本内容,您仍然应用填充,而不是保证金!
℃。 我想制作一些很酷的未来派布局,盒子彼此不对齐。其中一些甚至应该重叠!
在这种情况下,它显然不是间距问题,而是定位问题,所以你应该使用你已经猜到的position
属性。不要将空格元素相互应用于空格元素,而是将位置相对于父元素(或者如果使用position: relative
则设置为默认位置)。
提示:为了更容易确定您是否需要保证金或填充,请始终考虑如果您的所有元素都有边框,您会怎么做。
答案 1 :(得分:2)
边距用于在两个元素之间创建空格,而填充用于分隔元素相对于边缘的内容。
更新:我使用短划线( - )来表示空格。
所以这是保证金......
- |元素| - |元素| -
这是填充......
| -Element- || -Element- |
这是保证金和填充......
- | -Element- | - | -Element- | -
所以问题是,你想用什么...答案是它取决于。如果元素有可见边缘,无论是背景颜色还是边框,填充都不会在元素之间产生可见的间隙,因此您必须使用边距来分隔它们(即阻止边缘接触)。
基本上,它们做了不同的事情,你应该使用边距来填充空间元素,并使用填充来创建元素边缘与其内容之间的间隙。
答案 2 :(得分:0)
回答你的问题:没有。您的主要构建块可能使用浮动布局,使用负边距可以保持合理的源顺序 - 请参阅http://www.alistapart.com/articles/negativemargins/