CSS，嵌套divs&边距与填充 [英] CSS, nested divs & margins vs. padding

问题描述

我完全理解盒子模型。这个问题更多的是试图确定一个关于何时使用边距和何时使用填充的语义方法。

这里是一个典型的例子，

首先是简体中文：

• 情况：我们有一个容器div，里面有一个段落元素。
p>

选项b）将12px边距应用于段落元素

或如果您愿意，HTML：

 < div id = > 
< p> Hello World！< / p> 
< / div> 
  

和CSS：

）

  div＃container {padding：12px;} 
  

选项b）

  p {margin：12px;} 
  

干杯！

Jon

解决方案

个人而言，我更喜欢选项A.为什么？现在说，我必须添加其他HTML元素到div，我想要维护填充，我不必添加其他规则到我的CSS文件，使其工作。

i totally understand the box model. this question is more about trying to pin down a semantic methodology regarding when to use margins and when to use padding.

here is a typical example,

first, in plain English:

• situation: we have a container div, inside of which there is a paragraph element.

• goal: to have a 12px space between the inside of the div and the outside of the paragraph.

• option a) apply 12px of padding to the container div

• option b) apply 12px margins to the paragraph element

or, if you prefer, HTML:

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

and, CSS:

option a)

div#container {padding: 12px;}

option b)

p {margin: 12px;}

Cheers!

Jon

解决方案

Personally, I prefer option A. Why? Say now I have to add other HTML elements into the div and I want the padding to be maintained, I would not have to add other rules to my CSS files to get it working.

这篇关于CSS，嵌套divs&边距与填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！