我遇到的问题是... 在这个例子中， margin 对我来说不起作用。 填充就像边距一样工作。为什么？
打印屏幕:
为什么？位于 div 元素内的 h3 中的边距将边距放置到此父 div 元素而不是 h3 本身。 填充做 margin 的工作？我不明白这个... 什么？为什么？ 边距应将此 h3 元素推离 div 父元素。 为什么它从他上面的其他元素推 div parent？
代码:
<!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>
最佳答案
您正在体验 CSS collapsing margins .这意味着对于正常文档流中相邻的垂直 block 级元素，只有具有最大边距值的元素的边距将得到尊重，而具有较小边距值的元素的边距将被折叠为零。
如果您检查 h3 元素，您会看到 h3 边距被折叠了。这是 CSS 的一个怪癖。在这种情况下，使用填充将标题向下推似乎是一个很好的解决方案。
padding-top: 70px 而不是 h3 上的 margin-top: 70px 将在这种情况下起作用，但为了更好的可预测性，我将在 h3 元素父 div 上使用填充:
header {
padding-top: 70px;
}
编辑 如果你想在你的h3 元素上放置一个边框，那么你不能在它上面填充。如前所述，您可以在作为标题父元素的 header 元素上添加填充。我假设你想要这样的东西:
下面是我所有代码的片段:
<!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>关于html - margin 不能正常工作？填充做 margin 的工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44033760/