What height will the <div> have with the wrapper class, if the following HTML markup and external stylesheet are given below:

HTML – markup:

<div class="wrapper">
      <div class="block1">
      </div>
      <div class="block2">
      </div>
 </div>

CSS – rules:

.wrapper
        {
            width: 300px;
            overflow: hidden;
        }
        .block1
        {
            margin: 50px 0;
            height: 100px;
        }
        .block2
        {
            margin: 50px 0;
            height: 100px;
        }  
Explanation
For elements located in a normal flow, vertical margins are "collapsed" - the distance between elements is equal to the larger of the values ​​of adjacent margins, rather than their sum.

For adjacent floating elements, the margins are added together.

Follow CodeGalaxy

Mobile Beta

Get it on Google Play
Send Feedback