One thing I'm curious about:
- Will the margins of two different divs merge if they have the same value when intersecting? It appears so!
- Do paddings not merge when two different divs intersect, even if they have the same value? It seems that way!
- When two different divs with different paddings intersect, will each div respect its own padding, resulting in a greater height/distance between them compared to using margins (since padding doesn't merge)? It seems likely!
Question: When two different divs with different classes intersect (margin bottom of div 1 with margin top of div2), will the div with the higher margin value use the previous div's margin and only add the difference? Is this the expected behavior?
Is there a tool available to measure/show visually the distance in pixels between two objects on a browser (divs/images/paragraphs, etc.)? Any Firefox/Chrome add-ons recommended?
.div1-margin {
margin: 32px 0;
background-color: #fcfcc0;
}
.div2-margin {
margin-top: 132px;
background-color: #c0fcf9;
}
.div1-padding {
padding: 32px 0;
background-color: #c5fcc0;
}
.div2-padding {
padding-top: 132px;
background-color: #ecc0fc;
}
h2.h2margin {
color: blue;
padding: 0!important;
margin: 0!important;
font-size: 18px;
}
h3 {
font-size: 18px;
color: green;
padding: 16px 0;
}
h2.h2padding {
color: red;
padding: 0!important;
margin: 0!important;
font-size: 18px;
}<h2 class="h2margin">Here, div 2 has a margin-top of 132px and div 1 has a margin-bottom of 32px.</h2>
<div class="div1-margin">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="div2-margin">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum portes factures.
</div>
<h3>Will the total distance (space) above between div 2 and div 1 be 132px? (margins used)</h3>
<h2 class="h2padding">Here, div 2 has a padding-top of 132px and div 1 has a padding-bottom of 32px.</h2>
<div class="div1-padding">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="div2-padding">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum portes factures.
</div>
<h3>Will the total distance (space) above between div 2 and div 1 be 164px? (paddings used)</h3>