当前位置：文江博客话题详情

使用保证金和保证金时应该考虑什么？填充空间元素？

发布于 2024-11-19 22:17:55 字数 223 浏览 1 评论 0原文

我的任务是修改网站的布局，使其符合客户公司风格指南的标准。

该指南要求我确保某些元素与其他元素间隔 [X]px，并且该类型的元素与该类型的元素对齐。

因此，当我这样做时，我可以看到现有间距在某些情况下使用 padding 定义，而在其他情况下使用 margin 定义。

有这样做的首选方法吗？我什么时候应该使用其中一种而不是另一种？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

彩虹直至黑白 2024-11-26 22:17:55

通俗地说。

如果您有两个相邻的 div，则两者之间的空间称为边距。

如果 div 中有文本，则 div 边缘（上、右、下、左）和文本之间的空间称为内边距。

回复收藏 0 原文

兔小萌 2024-11-26 22:17:55

这确实取决于某种程度。边距和填充是两个不同的东西。但在某些情况下，您不会注意到差异。

显示差异的图：

在此处输入图像描述

来源：http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/bilder/boxdim.gif

例如：如果你想定义边框和你的边框之间的空间内容你只能通过填充来实现这一点（同时具有可见的边框）。

回复收藏 0 原文

萌酱 2024-11-26 22:17:55

这种差异最好通过视觉来解释。

尝试一下：

<html>
<head>
  <style>
    body { background-color: #E342FF; margin: 0; padding: 0; }
    #mydiv { border: 2px solid #000000; width: 50%; height: 20%; margin: 50px 0 0 50px; }
    #mydiv2 { border: 2px solid #000000; width: 50%; height: 20%; padding: 50px 0 0 50px; }  
</style>
</head>
<body>
<div id="mydiv">
</div>
<div id="mydiv2">
</div>
</body>
</html>

您应该会看到边距只是移动了 div，而内边距实际上使其变大了。

The difference is best explained visually.

Try this out:

<html>
<head>
  <style>
    body { background-color: #E342FF; margin: 0; padding: 0; }
    #mydiv { border: 2px solid #000000; width: 50%; height: 20%; margin: 50px 0 0 50px; }
    #mydiv2 { border: 2px solid #000000; width: 50%; height: 20%; padding: 50px 0 0 50px; }  
</style>
</head>
<body>
<div id="mydiv">
</div>
<div id="mydiv2">
</div>
</body>
</html>

You should see that the margin is simply moving the div, and the padding is actually making it larger.

回复收藏 0 原文

~没有更多了~