当前位置:  开发笔记 > 编程语言 > 正文

处理CSS边距/填充"冲突"的最佳做法是什么?

如何解决《处理CSS边距/填充"冲突"的最佳做法是什么?》经验,为你挑选了1个好方法。

我有一个

,有padding{0.5em}.里面是一堆带有表单字段等的s,设置为display:block;margin:0 0 0.8em,在它们之间留出一点空间.

问题是我的底部然后以1.3em的有效填充底部结束.

什么是最好的解决方案?

我可以设置div的填充来0.5em 0.5em 0 0.5em"改善"从1.3em到0.8em的问题,但它仍然不是它应该是的0.5em.不允许使用负填充值.

我显然可以使用:last-child伪选择器margin-bottom在最后一个标签标签上给出0,但我觉得必须有一个更整洁/更容易/更可维护的方式?

我可以设置margin:0.4em 0padding:0.1em 0.5em,但似乎乱了,只要我想补充(例如)的分解

在div的顶部.

理想情况下,我希望将子元素的第一个顶部和最后一个底部边距设置为"崩溃",不知何故.

谢谢!



1> Emil..:

我这样做的方法是margin-top在标记中的另一个元素/选择器后面的任何标签上添加一个,而不是margin-bottom在所有标签上.

例如,如果您有交替元素:

...然后我会使用相邻的兄弟选择器仅在输入后定位标签,从而忽略第一个输入:

input + label {
  margin-top: 0.8em;
}

也就是说,如果标记不允许这种模式,:last-child(甚至更好:last-of-type),那就没问题了.

推荐阅读
oDavid_仔o_880
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有