Paragraph does not apply to heading margin
So I am trying to adjust the vertical rhythm on the page. But p
does not respect the lower limit h1
. Can someone explain to me why?
Here is my code (em units would be better, but for simplicity I used pixels):
html {
font - size: 18px;
line - height: 1.5;
}
h1 {
font - size: 30px;
line - height: 1.5;
margin: 4.5px 0 4.5px;
}
p {
margin: 27px 0;
}
<body>
<h1>blaasdfasf</h1>
<p>...</p>
</body>
Edit:
Here you can see what I mean:
The fields are h
ignored as much as you can.
source to share
It's called "Collapsing margin" and it has a lot of theme. By and large, this will be very common. All you can do is increase the size of the box or change the HTML elements. You can read:
- http://www.sitepoint.com/web-foundations/collapsing-margins/
- CSS margin overlap issue
- Is the margin not working? Space required between two elements
A good solution is to create a container for items p
in div
and place it in a property padding-top
. With this, the content will have its own stock:
html {
font-size: 18px;
line-height: 1.5;
}
h1 {
font-size: 30px;
line-height: 1.5;
margin: 4.5px 0 15px;
overflow:auto;
}
#margin {
padding-top:15px;
}
<h1>blaasdfasf</h1>
<div id="margin">
<p>...</p>
</div>
Or just apply padding
directly to the element p
:
p {
padding-top:15px;
}
source to share
Margins are broken between adjacent elements. In simple terms, this means that for adjacent vertical block-level elements in a normal document flow, only the margin of the element with the highest margin value will be executed, while the margin of the element with the lowest margin value will collapse to zero.
html {
font-size: 18px;
line-height: 1.5;
}
h1 {
font-size: 30px;
line-height: 1.5;
margin:4.5px 0 4.5px;
}
p {
margin: 0;
padding: 0;
}
source to share
The W3C specification states that when the vertical margins of two items touch, only the margin of the item with the highest margin value will be executed, while the margin of the item with the lower margin value will collapse to zero. The margin refers to a different item position, not including its margins. You can summarize the registration, but not summarize the fields.
html {
font-size: 18px;
line-height: 1.5;
}
h1 {
font-size: 30px;
line-height: 1.5;
margin: 4.5px 0 4.5px;
}
p {
margin: 27px 0;
padding 0;
}
Try jsfiddle
source to share