CSS嵌套的div&利润与填充

StackOverflow https://stackoverflow.com/questions/1419519

  •  07-07-2019
  •  | 
  •  

题

我完全理解箱模型。这个问题更多的是想到一个语义的方法就何时使用的利润时使用的填充。

这里是一个典型的例子，

首先，简单的英语：

  • 情况：我们有一个容器格，里面有一段元。

  • 目标：有一个12px空间之间的内部和外部的段落。

  • 选项a)适用12px的填充的容器div

  • 选项b)适用12px利润的第元

或者，如果你喜欢,HTML：

<div id="container">
    <p>Hello World!</p>
</div>

而且，CSS:

选项a)

div#container {padding: 12px;}

选项b)

p {margin: 12px;}

干杯！

乔恩

有帮助吗？

解决方案

就个人而言，我宁愿选择A。为什么？说现在我要添加其他HTML元素进div我想要填补以保持，我也不会增加其他规则来我CSS文件得到它的工作。

其他提示

填充和利润，让相同的效果，除非在下列情况下(我可能会错过一些):

  1. 你有某种背景的性质。利润率不会得到它们。
  2. 你有一个边境
  3. 你使用TD(没有利润)
  4. 两种嵌套项目，利润率折叠在一起，在填补处理不了。
  5. (需要检查这一)他们可能会影响的宽度和高度件不同。(如果有人知道越好，请编辑)。

这是一个错误在css， 这里是实例：

http://creexe.zxq.net/div-issue-padding.html =填充问题

http://creexe.zxq.net/div-issue-margin.html =保证金的问题

红色和绿色div标记在例创建的属性，但它有自己的缺点，确保上，下等工作，只有当的位置div标是绝对和相对的，但不是静态的

这取决于你是在试图完成视觉上的。会 container 还有其他孩子的元素，这可能会挂在进入排水沟两边的段落？如果是这样，一个保证金使得更有意义。但是，如果 container 应该有一个12-像素的排水沟的所有要素，期间，它最有意义使用的填充，以避免具有适用利润来的多个元素集。

一般来说你总是想要段落有垂直的利润率，以确保一致的段落领导。

就个人而言，我会去选一个的 #container {padding: 12px;} 因为它使充分明确的， 所有 儿童元必须留12px远离边境的这div。

如果我想要的其他元素留超过12px离开 #container's边界，那么我申请成为多余。

干杯！

垂直填充分，因为如果我决定我想要一个不同的垂直空间量之间的多个段落，我会使用底部边缘和底填补的封闭司几乎总是将保持不变假设你只有staticly位的元素内。

差异是那里的边界。

边界坐嫌DAB中的利润率和填充。如果你指定的利润，这是空白的外部边界。

如果你指定填补的，这是空白的内部边界(推动边界进一步从元)

不能告诉你在这里，由于css剥离，但试试这个出：

<body style="background-color: #aaa">
<p style="background-color: #aee; margin: 40px; padding: 40px; border: solid 2px black;">
  i have margins, padding and a border.
</p>

<p style="background-color: #aee; margin: 40px; padding: 0; border: solid 2px black;">
  i have margins, and a border.
</p>

<p style="background-color: #aee; margin: 0; padding: 40px; border: solid 2px black;">
  i have padding and a border.
</p>
</body>

其他的东西！

  • 填充带来的背景的颜色元，利润率基本上都是透明的

  • 一些元素(如td)似乎忽视的利润率，同时他们应对变化中的填充

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top