填充在css和html上的作用是什么[重复]答案

【问题标题】：what is the padding's role on the css and html [duplicate]填充在css和html上的作用是什么[重复]
【发布时间】：2013-09-07 10:03:30
【问题描述】：

我有时会使用样式填充脚本

喜欢这个

<style>
#img1{padding:7px 10px}
</style>
<body>
<img src="myjpg.jpg" id="img1"/>
</body>

我无法具体理解padding的作用。

可能padding的作用是物体的外层边距？？

【问题讨论】：

这张图片可能会有所帮助.. i.stack.imgur.com/PeSIJ.gif ... 已经在这里提出的这个问题也会如此。 stackoverflow.com/questions/2189452/…
请参考google.com/#q=CSS+padding获取答案。

标签： html css

【解决方案1】：

正如您在图片中看到的（由 Josh 分享）：

假设你有一个元素 c 和父元素 p。

您可能会注意到，仅考虑 p 和 c 时，第 1 和第 3 种情况看起来很相似。

【讨论】：

【解决方案2】：

填充是从元素的外边界到包含子元素的内部部分的距离。

+------------+
|  (Padding) |
|  +------+  |<--- Outer Border
|  |(con- |  |
|  | tent)|  |

但是请注意，在 Firefox 和 Chrome 等浏览器中，默认情况下，填充会添加到元素的宽度中。

【讨论】：