see comment in css
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div>
<p>This is a paragraph.</p>
</div>
</header>
<section>
<div>
<p>This is a another paragraph.</p>
</div>
</section>
<a href="1">Link 1</a>
<a href="2">Link 2</a>
</body>
</html>
/* removing the default spacing */
/*body, header, section, div {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
}*/
/* */
header {
background-color: grey;
/*border: 1px blue solid;*/
}
section {
background-color: yellow;
}
div {
/*Parent-child collapse:
if there is no padding betweeen p and div (p and div adjoining), p and div's margin will collapse
(combine to form a single margin). In this case, the collapsed margin of p and div will be 20px.
Horizontal collapse:
Moreover, the margin between p top and p bottom will collapse to a single margin of 20px.
Inspect(chrome) shows that div's content is as large as p within border */
/* With padding added to div:
Div and p are no longer adjoining due to padding and the margin will not collapse. Inspect shows that
div's content is as large as p with margin (INCLUDING MARGIN). Outside of div's content, padding will
be added.
So the spacings between header .education .work (content-wrapper) footer come both from the default
margin around p and h and from padding of content-wrapper(div)s.*/
padding: 50px;
}
p {
border: 1px red solid;
padding: 25px;
/*margin: 0px;*/
margin: 20px 0px;
}
a {
border: 1px red solid;
}
684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
