如果我有用户生成的内容,例如:
<p>my paragraph</p>
<ul>
<li>item1</li>
<li>item2</li>
</ul>
这输出段落末尾和列表之间的段落差距如下:
我的段落
我知道我可以通过在UL标签上设置margin-top和在p标签上设置margin-bottom来摆脱CSS中的差距,但有没有办法在不影响实际段落之间的边距的情况下完成.
内容是用户生成的,有一组有限的标签可用,没有字体,大小......可用所以所有格式都应该在CSS中完成,如果可能的话,而不必在标签中放置类.
编辑: 应该把我知道,因为我可以设置的边缘折叠在CSS中的工作方式
p { margin-bottom:0; }
li { margin-top:0; }
在两种情况下分离都是正确的,因为p标签上的margin-top属性仍然是1,但是我已经将margin-top设置为0.2em,以获得h2和p标签之间的较小间隙.
这是兄弟选择器的完美用例.但是,它在IE6或IE7中不起作用.
p { margin: 0; }
ul { margin-top: 0; margin-bottom: 0; }
p + p { margin-top: 15px; }
p + ul { margin-top: 3px; }
ul + p { margin-top: 3px; }
所以,这里发生的是我在p和ul上将相关的边距设置为0,然后告诉任何兼容的浏览器在ap之后查找ap并为其添加上边距.ap后面的ul相同(虽然它是一个小的边距),并且在ul之后的ap(再次大的余量).
同样,这在IE6和7中不起作用,因此您可能希望使用条件注释在这些浏览器上获得一个不错的(如果不是完美的)外观.
| 归档时间： |
|
| 查看次数： |
15029 次 |
| 最近记录： |