保证金不能正常工作？填充做保证金的工作？答案

【问题标题】：Margin doesn't properly work? Padding doing job of margin?保证金不能正常工作？填充做保证金的工作？
【发布时间】：2017-05-18 15:12:46
【问题描述】：

我遇到的问题是... 在这个例子中，保证金对我来说不能正常工作。和边距一样的填充工作应该。为什么？

打印屏幕：

为什么？ div 元素内的 h3 中的边距将边距放置到此父 div 元素而不是 h3 本身。和填充做边距的工作？我不明白这个... 什么？为什么？边距应该将此 h3 元素推离 div 父级。为什么它会从他上方的其他元素推送 div 父级？

代码：

<!DOCTYPE html>
<html lang="pl">
<head>

    <meta charset="utf-8">
    <title>Philosophia Blog</title>
    <meta name="description" content="Blog na temat ciekawych publikacji z dziedziny filozofii. Omówienie wybranych tekstów najsłynniejszych autorów!">
    <meta name="keywords" content="filozofia, książki, blog, przemyślenia">
    <meta name="author" content="Mortinez Walles">
    <link rel="stylesheet" href="style.css">
    <meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
    <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->
</head>
<style>

#aside {
    width: 315px;
    float: left;
    min-height: 500px;
}
.abox {
    margin: 10px;
    margin-bottom: 20px;
    max-width: 279px;
}
.abox1 {
    height: auto;
    box-shadow: 3px -3px 6px 0px #000000,
    -1px 1px 1px 0px #000000;
}
.abox1-content {
    padding: 10px;
}
#photo {
    width: 80px;
    height:80px;
    float: right;
    background-image: url("zdj.png");
    background-repeat: no-repeat;
    margin: 10px;
    border: 1px solid #000000;
    box-shadow: 1px 1px 2px 0px #000000;
}
.abox2 {
    height: 300px;
    box-shadow: 3px -3px 6px 0px #000000,
    -1px 1px 1px 0px #000000;
}
.abox h3 {
    text-align: center;
    margin: 0px;
    margin-top: 70px;
}
.clear {
    clear: both;
}
</style>

<aside>
        <div id="aside">
            <div class="abox1 abox">
                <div class="abox1-content">
                    <div id="photo"></div>
                    Cześć! Jestem Michał. Dzięki zarabianiu na blogu i rozsądnemu oszczędzaniu stać mnie na wiele. Chcę Ci pokazać jak zadbać o domowy budżet, wychodzić z długów, pomnażać oszczędności i samemu zadbać o godziwą emeryturę. 
                </div>
            <div class="more"><a href="#">Więcej o mnie...</a></div>
            </div>
            <div class="abox1 abox">
                <header>
                    <h3>Pobierz darmowe Materiały</h3>
                </header>
                <div class="abox1-content">
                    Już ponad 67 000 osób zapisało się na mój newsletter (zero spamu! - tylko informacje o nowych artykułach).
                    Zapisz się i otrzymasz zestaw 23 kalkulatorów Excel, które pomogą Ci policzyć koszty mediów, obliczyć raty kredytów, policzyć Twoją wartość netto, sprawdzić opłacalność kantorów internetowych, poznać sposoby kategoryzacji wydatków i wiele innych!
                </div>
            </div>
            <div class="abox1 abox">
            </div>
        </div>
    </aside>
</body>
</html>

【问题讨论】：

参考这些链接stackoverflow.com/questions/17187162/…和stackoverflow.com/questions/13573653/…你会明白的

标签： html css margin padding

【解决方案1】：

您正在体验 CSS collapsing margins。这意味着对于正常文档流中相邻的垂直块级元素，只有margin值最大的元素的margin会被尊重，而margin值较小的元素的margin会被折叠为零。

如果您检查 h3 元素，您会看到 h3 边距正在折叠。这是 CSS 的一个怪癖。在这种情况下，使用填充将标题向下推似乎是一个不错的解决方案。

在这种情况下，h3 上的padding-top: 70px 而不是margin-top: 70px 将起作用，但为了更好的可预测性，我会在h3 元素父 div 上使用填充：

header {
  padding-top: 70px;
}

编辑如果您想在h3 元素上添加边框，则不能在其上添加填充。如前所述，您可以在作为标题的父元素的 header 元素上放置填充。我假设你想要这样的东西：

这是一个 sn-p，下面是我的所有代码：

<!DOCTYPE html>
<html lang="pl">
<head>

    <meta charset="utf-8">
    <title>Philosophia Blog</title>
    <meta name="description" content="Blog na temat ciekawych publikacji z dziedziny filozofii. Omówienie wybranych tekstów najsłynniejszych autorów!">
    <meta name="keywords" content="filozofia, książki, blog, przemyślenia">
    <meta name="author" content="Mortinez Walles">
    <link rel="stylesheet" href="style.css">
    <meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
    <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->
</head>
<style>

#aside {
    width: 315px;
    float: left;
    min-height: 500px;
}
.abox {
    margin: 10px;
    margin-bottom: 20px;
    max-width: 279px;
}
.abox1 {
    height: auto;
    box-shadow: 3px -3px 6px 0px #000000,
    -1px 1px 1px 0px #000000;
}
.abox1-content {
    padding: 10px;
}
#photo {
    width: 80px;
    height:80px;
    float: right;
    background-image: url("zdj.png");
    background-repeat: no-repeat;
    margin: 10px;
    border: 1px solid #000000;
    box-shadow: 1px 1px 2px 0px #000000;
}
.abox2 {
    height: 300px;
    box-shadow: 3px -3px 6px 0px #000000,
    -1px 1px 1px 0px #000000;
}
.abox h3 {
    text-align: center;
    margin: 0px;
    border: 2px black solid; /* added border */
    /* removed margins */
}
header {
  padding-top: 70px; /*add padding to header to keep border on h1 */
}
.clear {
    clear: both;
}
</style>

<aside>
        <div id="aside">
            <div class="abox1 abox">
                <div class="abox1-content">
                    <div id="photo"></div>
                    Cześć! Jestem Michał. Dzięki zarabianiu na blogu i rozsądnemu oszczędzaniu stać mnie na wiele. Chcę Ci pokazać jak zadbać o domowy budżet, wychodzić z długów, pomnażać oszczędności i samemu zadbać o godziwą emeryturę. 
                </div>
            <div class="more"><a href="#">Więcej o mnie...</a></div>
            </div>
            <div class="abox1 abox">
                <header>
                    <h3>Pobierz darmowe Materiały</h3>
                </header>
                <div class="abox1-content">
                    Już ponad 67 000 osób zapisało się na mój newsletter (zero spamu! - tylko informacje o nowych artykułach).
                    Zapisz się i otrzymasz zestaw 23 kalkulatorów Excel, które pomogą Ci policzyć koszty mediów, obliczyć raty kredytów, policzyć Twoją wartość netto, sprawdzić opłacalność kantorów internetowych, poznać sposoby kategoryzacji wydatków i wiele innych!
                </div>
            </div>
            <div class="abox1 abox">
            </div>
        </div>
    </aside>
</body>
</html>

【讨论】：

为什么要用padding，应该是margin的工作。如果我现在在 h3 周围制作边框，它不会只围绕文本，而是围绕我制作的所有填充。应该是margin，完成了，为什么不行。
如上所述。由于被称为折叠边距的 CSS 怪癖，它不起作用。如果您需要在 h3 元素周围设置边框，您有很多选择。您可以在当前元素上使用相对定位、变换属性，甚至更多地使用边距。如果你愿意，我可以使用边距做一个例子。
没关系。谢谢你。我希望 w3 会尽快删除这个边缘崩溃的废话。 :)
是的。第一次学习的时候很烦。我希望你能以某种方式使用我的代码为你带来好处。如果您认为值得，请接受我的回答:)。

【解决方案2】：

边距是到其他组件的外部距离，应使用填充来定义到边距的距离。

padding 会排列内容，而 margin 会排列容器。

也许这会有所帮助：

【讨论】：

为什么要用padding，应该是margin的工作。如果我现在在 h3 周围制作边框，它不会只围绕文本，而是围绕我制作的所有填充。应该是margin，完成了，为什么不行。