I have a trivial question about the layout. There is such a code for navigation. I was assured from the studio that such an approach is not the right one, and the menu and social-link given 50% of the width.

I would like to know from you. Is there any difference?

 .navigation{ width:100%; padding:15px; display:flex; justify-content:space-between; align-items:center; box-sizing:border-box; } .menu{ display:inline-block; padding:15px; text-align:center; box-sizing:border-box; } .social-link{ display:inline-block; padding:15px; text-align:center; box-sizing:border-box; } .link{ display:block; padding-left:15px; padding-right:15px; } .facebook::after{ content:"facebook"; font-size:1rem; font-family:material-icon; } .twitter::after{ content:"twitter"; font-size:1rem; font-family:material-icon; } <nav class="navigation"> <menu class="menu"> <a href="" class="link">Home</a> <a href="" class="link">About</a> <a href="" class="link">Service</a> <a href="" class="link">Contact</a> </menu> <div class="social-link"> <a href="" class="link facebook">Facebook</a> <a href="" class="link twitter">Twitter</a> </div> </nav>
  • one
    inline-block at 50% of the width will be more than 50% - Nikita Fast

1 answer 1

If you simply paste them as they are, their width will depend on the padding , in your case the width will be equal to 30px ( padding-left: 15px; + padding-right: 15px; )

 .menu { background: red; display: inline-block; padding: 15px; text-align: center; box-sizing: border-box; } .social-link { background: blue; display: inline-block; padding: 15px; text-align: center; box-sizing: border-box; } 
 <div class="menu"></div> <div class="social-link"></div>

If it is necessary for these blocks to be wide of the entire parent element, then people from the studio said correctly that the blocks should have width: 50% , but since these are inline blocks, they should still have float: left; (due to features or bug, xs).

 .menu { background: red; display: inline-block; padding: 15px; text-align: center; box-sizing: border-box; } .social-link { background: blue; display: inline-block; padding: 15px; text-align: center; box-sizing: border-box; } .menu, .social-link { float: left; width: 50%; } 
 <div class="menu"></div> <div class="social-link"></div>

  • Just the question is if you need to add the width: 50% blocks and set the positioning for the internal elements. Say text-align: left; text-align-right; . It is the same picture as space-between without width: 50%. I just wanted zanta there is a difference between these two options. - Rivera Time Club