css - What's the impact of the negative bottom margin -


first, here html:

<div class="first">     <div class="second">         <div class="third">            hello, margin collapsing!         </div>     </div> </div> 

then here css:

.first {   background-color: red;   padding: 20px; }  .second {   background-color: green;   margin-bottom: -20px; }  .third {   background-color: yellow;   margin-bottom: 20px; } 

in final layout, third div looks doesn't have bottom margin. know must effect of second div bottom margin negative. don't understand how works. please provide explanation?

padding - creates, easy said, invisible border inside element. provide spaces inside of element (arround content).

.first {   background-color: red;   padding: 20px; } 

so here tell, content of first hast 20px away each side (each side cause did not provide declaration padding-top)

margin - on other hand creates opposite, creates space arround element.

.second {   background-color: green;   margin-bottom: -20px; } 

so 1 says second block has space on bottom outside. defined negative, means following items float in element.

this explains awfully: https://developer.mozilla.org/en-us/docs/web/css/css_box_model/introduction_to_the_css_box_model


Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -