Question

我得到的问题是...... 在此示例中，保证金对我不起作用。填充就像保证金一样。为什么呢？

打印屏幕：

为什么呢？在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>

Answer 1

您遇到了CSS collapsing margins。这意味着对于正常文档流中的相邻垂直块级元素，只有具有最大边距值的元素的边距将被尊重，而具有较小边距值的元素的边距将折叠为零。

如果您检查了h3元素，则可以看到h3边距正在折叠。这是CSS的怪癖。在这种情况下使用填充来推动标题似乎是一个很好的解决方案。

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

header {
  padding-top: 70px;
}

编辑如果您想在h3元素上添加边框，则无法对其进行填充。如前所述，您可以在header元素上添加填充，该元素是您标题的父元素。我假设你想要这样的东西：

以下是我的所有代码的代码段：

＆＃13;

<!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>

＆＃13;

Answer 2

边距是指其他组件的外部距离，无论何时应使用填充来定义边距的距离。

填充将安排内容，但保证金将安排容器。

也许这会有所帮助：

保证金不正常工作？填充保证金的工作？

2 个答案: