Почему CSS 'padding' создает поле в моем элементе? - PullRequest
Новая
       21

Почему CSS 'padding' создает поле в моем элементе?

0 голосов
/ 18 апреля 2019

У меня есть ul с шириной 100%, но когда я добавляю padding, появляется правое поле.Почему это происходит?Код ниже. 

nav ul {
  list-style: none;
  text-align: center;
  background-color: rgb(90, 32, 102);
  line-height: 3.125em;
  position: relative;
  right: 38px;
  width: 100%;
  padding: 1em 0;
}
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Ответы [ 2 ]

0 голосов
/ 18 апреля 2019

Это потому, что ul имеет значение по умолчанию padding-left (40px), которое вы сделали равным 0, и вы можете увидеть 38px справа из-за position:relative;right:38px.

Обратите внимание, что width:100% также является виновником, потому что с добавленным к нему отступом по умолчанию у вас будет переполнение, поэтому сдвиг элемента влево (с помощью right:38px) не достаточен, чтобы увидеть пустое пространство: 

nav ul {
  list-style: none;
  text-align: center;
  background-color: rgb(90, 32, 102);
  line-height: 3.125em;
  position: relative;
  right: 38px;
  width: 100%;
}

nav {
  width:80%;
  margin:auto;
  border:1px solid;
}
width 100% + default padding creating an overflow
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
width is now auto, so no more overflow and we see the 38px
<nav>
  <ul style="width:auto">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
padding is now 0, so no more overflow and we see the 38px
<nav>
  <ul style="padding:1em 0">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
0 голосов
/ 18 апреля 2019

Использование position: relative и right: 38px здесь не является идиоматическим.Он говорит, чтобы переместить правый край элементов ul влево от того места, где они обычно находятся, на 38px, создав правое поле.Наилучшим первым шагом, вероятно, будет удаление этих двух свойств.

Похоже, что вы хотите центрированный список без маркеров, что будет результатом.Для отступа ul задается padding, который слева уже равен 0.

Сначала я неправильно прочитал вопрос, думая, что элементы li нарушают стиль, будучи слишком широкими.Данный совет был принят, поэтому я предполагаю, что он был полезен, если бы не ответ.

Заполнение по умолчанию выходит за пределы ширины элемента, поэтому ваши блоки ul на самом деле 100% + 1em высокие ,

Использование свойства box-sizing css для применения box-sizing: border-box; создаст ожидаемое поведение.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

border-box Свойства ширины и высоты включают содержимое, отступы и рамку, но не включают поля.Обратите внимание, что отступы и границы будут внутри поля.Например, .box {width: 350px;border: 10px solid black;} отображает прямоугольник шириной 350px.Поле содержимого не может быть отрицательным и имеет значение 0, что делает невозможным использование рамки для исчезновения элемента.

...