0

В верстке встречаю 2 подхода к установке wrapper.

1:

.wpapper{
  padding: 10%;
}

2:

.wrapper{
  width: 80%;
}

В чем разница на практике? Почему иногда выбирают одно, а иногда другое? В чем преимущества одного перед другим?

2 ответа 2

2

Оба элемента управляются одинаково, с небольшой разницей. Как по мне, то единственное, с чем могут быть проблемы - работа с абсолютной позицией. Вот пример:

* {
 -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>

Так же не стоит забывать про работу с background. При ширине в 80% у вас будут белые края, в то время как с padding-ом вы сможете делать фон для этого блока. В общем-то оба вариант имеют место быть, все зависит от ситуации, а которой их используют.

0

Если мы используем padding, сам элемент остается 100% ширины. И абсолютно спозиционированные элементы будут сдвигаться к краям:

.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>

Если мы используем width, то абсолютно спозиционированные элементы легко прибить к краю блока. Так-же, естественно, фон будет уже:

.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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.