In the layout I meet 2 approaches to the installation of wrapper.

one:

.wpapper{ padding: 10%; }

2:

 .wrapper{ width: 80%; }

What is the difference in practice? Why sometimes choose one and sometimes another? What are the advantages of one over the other?

    2 answers 2

    Both elements are controlled the same way, with a slight difference. As for me, the only thing with which there can be problems is working with an absolute position. Here is an example:

     * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { margin: 0; padding: 0; } .wrapper { padding: 10%; width: 100%; position: relative; background: #eee; height: 150px; } .wrapper2 { width: 80%; margin: 10%; position: relative; background: #eee; height: 150px; } .inner { border: 1px solid #ccc; width: 100%; height: 100%; } .element { position: absolute; right: 0; top: 0; width: 20px; height: 20px; background: #c00; } 
     <div class="wrapper"> <div class="element"></div> <div class="inner"></div> </div> <div class="wrapper2"> <div class="element"></div> <div class="inner"></div> </div>

    Also, do not forget to work with background . With a width of 80%, you will have white edges, while with padding you can make a background for this block. In general, both options have a place to be, it all depends on the situation, and which they are used.

      If we use padding , the element itself remains 100% wide. And absolutely positioned elements will move to the edges:

       .wpapper { padding: 30px 10%; background: #ccc; position: relative; } .abs { position: absolute; left: 0; top:0; background: red; } 
       <div class=wpapper>Обычный тест <div class="abs">Спозиционированный элемент</div> </div>

      If we use width , then absolutely positioned elements are easily nailed to the edge of the block. So, naturally, the background will be:

       .wpapper { width: 80%; padding: 40px 0; margin: 0 auto; background: #ccc; position: relative; } .abs { position: absolute; left: 0; top:0; background: red; } 
       <div class=wpapper>Обычный тест <div class="abs">Спозиционированный элемент</div> </div>