Откуда берется отступ с краю

Рейтинг: 0Ответов: 1Опубликовано: 25.07.2023

подскажите пожалуйста почему отображается отступ с краю, если при сложении ширины всех элементов контейнера и margin'ов получается нужное значение, а если добавить 2px, отступ исчезает, что я не учел?

* {
  box-sizing: border-box;
}

.wrapper {
  width: 1100px;
  border: 1px solid black;
  margin: 30px auto;
}

#header {
  height: 250px;
  border: 1px solid black;
  padding: 20px;
}

#container {
  display: flex;
}

#content {
  height: 1500px;
  width: 560px;
  margin-right: 20px;
  border: 1px solid black;
  padding: 20px;
}

#left {
  width: 250px;
  margin-right: 20px;
  border: 1px solid black;
  padding: 20px;
}

#right {
  width: 250px;
  border: 1px solid black;
  padding: 20px;
}

#footer {
  height: 150px;
  border: 1px solid black;
  padding: 20px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div class="wrapper">
    <div id="header">header</div>
    <div id="container">
      <div id="content">content</div>
      <div id="left">left sidebar</div>
      <div id="right">right sidebar</div>
    </div>
    <div id="footer">footer</div>
  </div>
</body>

</html>

css html css3
Источник: Stack Overflow на русском

Ответы

▲ 1

почему отображается отступ с краю, если при сложении ширины всех элементов контейнера и margin'ов получается нужное значение, а если добавить 2px, отступ исчезает, что я не учел?

Давай посчитаем...

  • wrapper width: 1100px
  • #content width: 562px
  • #left width: 250px
  • #right width: 250px

Итого разность получается 38px. Отнять еще два отступа по 20px... Уже не сходится.

Я убрал отступы и добавил одно свойство контейнеру - отступа нет.

* {
  box-sizing: border-box;
}

.wrapper {
  width: 1100px;
  border: 1px solid black;
  margin: 30px auto;
}

#header {
  height: 250px;
  border: 1px solid black;
  padding: 20px;
}

#container {
  display: flex;
  /* добавил */
  justify-content: space-between;
}

#content {
  height: 1500px;
  width: 562px;
  border: 1px solid black;
  padding: 20px;
}

#left {
  width: 250px;
  border: 1px solid black;
  padding: 20px;
}

#right {
  width: 250px;
  border: 1px solid black;
  padding: 20px;
}

#footer {
  height: 150px;
  border: 1px solid black;
  padding: 20px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div class="wrapper">
    <div id="header">header</div>
    <div id="container">
      <div id="content">content</div>
      <div id="left">left sidebar</div>
      <div id="right">right sidebar</div>
    </div>
    <div id="footer">footer</div>
  </div>
</body>

</html>