Menu
So I am trying to set up vertical rhythm on a page. But p is not respecting bottom margin of h1. Can someone explain me why?
Here is my code (em units would be better but for the sake of simplicity I have 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 margin of h is ignored as you can se.
957
It's called "Collapsing margin", and there are a lot of topic about it. Basically the larger margin will count, it's very common. All you can do is increased the larger margin or change you HTML elements. You might like to read:
A good solution is you create a container to the p elements into a div and put it in a padding-top property. With it, the content will have their own margin:
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 simply apply the padding directly into the p element:
p {
padding-top:15px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
