This content originally appeared on Level Up Coding - Medium and was authored by Isaiah Brown
In a recent article, I left off by talking about margins and how marginal spaces are added up to create the space. When you create a margin between two elements that are vertically parallel to each other. The two elements are then added to create a sum of space between each other.
On the other hand perpendicular elements, meaning above and below one another eliminates calculations altogether. How these two elements' margins are calculated by the web page is by taking the element with the largest top or bottom margin value and setting the space value equal to the larger value.
//HTML
<h1>Top margin</h1>
<h2>Bottom margin</h2>
____________________________________________________________________
//CSS
h1{
border: solid 1px red;
margin-bottom: 100px;
width: 200px;
}h2{
border: solid 1px green;
margin-top: 50px;
width: 200px;
}If we take a look at the example code above the output would result in this:
Between these two elements, the h1 element which is the one above this h2 has a margin-bottom of 100px while the h2 has a margin-top of 50px. This is where the margin collapse occurs where the h1 element is calculated as the whole space between the two elements because it has a marginal space of 100px and the h2 has a marginal space of 50px.
h1{
border: solid 1px red;
margin-bottom: 100px;
width: 200px;
}
h2{
border: solid 1px green;
margin-top: 0;
width: 200px;
}
So if we set the margin-top on the h2 to 0px you will notice that the result will stay the same. That is again because of the margin collapse.
In my view using marginal space between 2 elements that are above and below one another come down to using marginal space between them. I’d much rather take the top element and add a bottom margin to it. In this way, I'm working my way from top to bottom!
Font-End: Margin Collapse was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Isaiah Brown
Isaiah Brown | Sciencx (2022-04-03T15:21:21+00:00) Font-End: Margin Collapse. Retrieved from https://www.scien.cx/2022/04/03/font-end-margin-collapse/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.