如何将CSS'margin'和'padding'用于垂直段间距：
可以使用填充和/或使用边距来定义段落之间的垂直空间吗？ 如果可以使用其中任何一个，那么哪个更好或更正常？ 您是否倾向于定义非零填充和非零边距，如果是，那么每个边距多少？边距，填充和边框的示例 在理论上解释了边距和填充之间的差异：我在质疑每个在实践中使用多少，以呈现正常，漂亮的页面。
其次，给出如下标记......
<p>Paragraph.</p> <ul> <li>List item.</li> <li>Another list item. <p>List paragraph.</p> </li> </ul>如果您希望每个段落和/或列表项之间具有相等的垂直空间，则：
您是否倾向于将<ul>定义为自己的零保证金+填充？ 或者<ul>通常具有非零保证金，这将无效，因为该保证金将与其中的<li>和其前面的<p>的边缘折叠？第三（我不确定我是否应该问第三个问题）， 折边利润的规范说：“如果一个盒子的顶部和底部边缘相邻，那么边缘可能会因此而崩溃。” 如果我在中间有一个像下面那样的空段落......
<p>Hello</p> <p></p> <p>World</p>...然后我希望看到这是一个空段落，即在Hello和World之间有一个额外的垂直空间：
什么会阻止这个空段的边距崩溃，因此空段是不可见的：这是非零填充吗？ 在什么情况下，一个盒子有相邻的顶部和底部边缘崩溃是有用的？欢迎回答任何或所有这三个问题。
我目前对IE特定的盒子模型问题并不特别感兴趣：相反，我想知道如何使用该标准。
How should CSS 'margin' and 'padding' be used for vertical inter-paragraph spacing:
Can the vertical space between paragraphs be defined using padding and/or using margins? If it can be done with either, then which is the better or more normal one to use? Do you tend to define non-zero padding and non-zero margins, and if so then how much of each?The Example of margins, padding, and borders explains in theory what the difference is between margin and padding: I'm questioning how much of each to use in practice, to render a normal, good-looking page.
Secondly, given markup like the following ...
<p>Paragraph.</p> <ul> <li>List item.</li> <li>Another list item. <p>List paragraph.</p> </li> </ul>If you want equal vertical space between each paragraph and/or list item, then:
Would you tend to define the <ul> as having zero margin+padding of its own? Or would the <ul> normally have non-zero margin, which would then have no effect because this margin will be collapsed with the margin of the <li> within it and of the <p> which precedes it?Thirdly (and I'm not sure whether I ought to ask this third question), the specification for collapsing margins says, "If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it." If I have an empty paragraph like the following one in the middle ...
<p>Hello</p> <p></p> <p>World</p>... then I'd expect to see this as an empty paragraph, i.e. with an extra amount of vertical space between the Hello and the World:
What would prevent this empty paragraph's margins from collapsing, and the empty paragraph therefore being invisible: is it non-zero padding which does this? In what scenario is it useful for a box to have adjoining top and bottom margins which collapse?Answers to any or all of these three questions would be welcome.
I'm not especially interested in IE-specific box model problems at the moment: instead I want to know about how to use the standard.
最满意答案
要回答第一个问题，如果使用边距或填充来添加元素之间的间距通常无关紧要，但是如果将边框应用于元素并使用填充来创建空格，则会将边界向外推出。
要回答第二个问题，只需看一下这段代码，然后再玩一下：
<html> <head> <title>Box Model Tests</title> <style type="text/css"> /* Just to get rid of the annoying padding/margin setting that is default in most browsers on the body tag from messing up our experiments */ body{ margin: 0px; padding: 0px; } p{ margin: 0px; padding: 0px; } /* It appears that if you modify the ul padding it tends to remove the bullet points, that is if you set the paddign to zero */ ul{ margin: 0px; } </style> </head> <body> <p>Paragraph.</p> <ul> <li>List item.</li> <li>Another list item. <p>List paragraph.</p> </li> </ul> </body> </html>请记住，在上面的示例中，所有剩余空间都与字体属性有关，可以使用与任何其他元素相同的方法进行更改。
到了第三个：
我认为'garrow'是关于空的<p>我不会遇到这个问题，因为我在布局中越来越少地使用<p>然而这篇文章看起来非常有趣，我认为提供了比W3C做到了。
To answer your first question, it generally does not matter if you use margin or padding to add spacing between elements, however if you apply a border to an element and use padding to make a space it will push out the border that far.
To answer you second issue just take a look at this code and maybe play around with it:
<html> <head> <title>Box Model Tests</title> <style type="text/css"> /* Just to get rid of the annoying padding/margin setting that is default in most browsers on the body tag from messing up our experiments */ body{ margin: 0px; padding: 0px; } p{ margin: 0px; padding: 0px; } /* It appears that if you modify the ul padding it tends to remove the bullet points, that is if you set the paddign to zero */ ul{ margin: 0px; } </style> </head> <body> <p>Paragraph.</p> <ul> <li>List item.</li> <li>Another list item. <p>List paragraph.</p> </li> </ul> </body> </html>Keep in mind that in the example above all the remaining space has to do with properties of the font, which can be changed using the same methods as any other element.
And to the third:
I think 'garrow' is right about the empty <p> I don't run into this issue that often as I use <p> less and less in my layouts however this article looked very interesting, and I think offers a better explanation than W3C did.
更多推荐
发布评论