Размер блок: Размеры блоков — Размеры Инфо

Этот урок дал вам краткое изложение некоторых ключевых проблем, с которыми вы можете столкнуться при определении размеров объектов в Интернете. Когда вы перейдете к CSS раскладке, изменение размеров станет очень важным для освоения различных методов раскладки, поэтому перед тем, как двигаться дальше, стоит разобраться в концепциях.

• Назад
• Обзор: Building blocks
• Далее

1. Каскад и наследование
2. Селекторы CSS
   • Селекторы типа, класса и ID
   • Селекторы атрибута
   • Псевдоклассы и псевдоэлементы
   • Комбинаторы
3. Блочная модель(The box model)
4. Фон и границы
5. Обработка разных направлений текста
6. Переполнение содержимого
7. Значения и единицы измерения
8. Размеры в CSS
9. Элементы изображений, форм и медиа-элементы
10. Стилизация таблиц
11. Отладка CSS
12. Организация вашей CSS

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Want to get more involved? Learn

how to contribute.

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Почему размеры блока больше заданных

При указании блоку свойств border или padding, блок становится больше заданных размеров. Используем свойство box-sizing: border-box для исправления такого поведения.

Подписаться на Telegram-канал блога

Если кратко, то просто добавляйте в начало основного css-файла следующие правила:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Абсолютно для всех элементов, включая все превдо-элементы :before и :after устанавливается свойство box-sizing: border-box;

Краткое объяснение

На изображении внизу видим разницу — верхний блок имеет по-умолчанию свойство box-sizing: content-box;, а нижнему блоку сами установили свойство box-sizing: border-box;

При box-sizing: content-box; ширина и высота задается контенту

При box-sizing: border-box; ширина и высота задается блоку

Объясню на этом же примере более развернуто.

Например, нужно сверстать блок шириной 400px с текстом, рамкой 10px и внутренним отступом текста от рамки 25px

Задаем HTML:

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, ut itaque illo laudantium possimus incidunt veritatis hic ab, magnam nesciunt natus est nisi iste voluptatem aperiam. Ut nesciunt, voluptates earum aliquid ad culpa assumenda eum nemo. Recusandae eos neque, commodi ducimus molestiae ea quis velit laudantium asperiores, delectus quam fuga, et tempora illo dicta quia nisi? Quos possimus at ducimus eum, odio earum reiciendis distinctio ad consequuntur architecto provident soluta, ratione sapiente ex perferendis quas. Aspernatur reprehenderit earum ex iste aliquid facere, veniam accusantium repellendus delectus, eum in doloribus explicabo suscipit itaque odio soluta praesentium ipsa, commodi esse saepe cupiditate!</div>

Задаем стили:

.text {
  padding: 25px;
  width: 400px;
  border: 10px solid #f7cb15;
}

Без свойства box-sizing: border-box; получаем блок шириной большего размера(470px), чем была задана(400px).

Так как свойство box-sizing по-умолчанию имеет значение content-box заданная ширина применятся к контенту(а не к блоку), а потом к ширине контента 400px еще прибавляется padding по 25px слева и справа и ширина рамки по 10px слева и справа и итоговая ширина блока становится 400px(ширина контента) + 50px(padding слева и справа) + 20px(border слева и справа) = 470px

Если же свойству box-sizing поставить значение border-box, то указанная ширина будет применена к блоку(а не к контенту) с учетом размеров padding и border

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

Еще один пример, когда верстка ломается без указания box-sizing: border-box

Предположим, нужно сверстать блок с преимуществами, где в ряд будут располагаться по 4 блока

Задаем структуру:

<div>
  <div>
    <div>
      <div>
        <div>
          <div>₽</div>
          <div>Plus 1</div>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.  Voluptate eligendi at suscipit odit iusto, similique, ex aliquam itaque soluta repellat.</div>
        </div>
        <div>
          <div>!</div>
          <div>Plus 2</div>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. repellat.</div>
        </div>
        <div>
          <div>$</div>
          <div>Plus 3</div>
          <div>Voluptate eligendi at suscipit odit iusto, similique, ex aliquam itaque soluta repellat.</div>
        </div>
        <div>
          <div>%</div>
          <div>Plus 4</div>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate eligendi at suscipit odit iusto, similique, ex aliquam itaque soluta repellat.</div>
        </div>
        <div>
          <div>#</div>
          <div>Plus 5</div>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.  Voluptate eligendi at suscipit odit iusto,</div>
        </div>
        <div>
          <div>@</div>
          <div>Plus 6</div>
          <div>Voluptate eligendi at suscipit odit iusto, similique, ex aliquam itaque soluta repellat.</div>
        </div>
      </div>
    </div>
  </div>
</div>

Задаем стили:

.pluses {
  background: #f6f6f6;
  border-radius: 10px;
  padding: 30px 0;
}
.pluses__flex {
  display: flex;
  flex-wrap: wrap;
}
.pluses-item {
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
}
.pluses-item__icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #f7cb15;
  display: block;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: bold;
  color: #f7cb15;
  font-size: 24px;
}
.pluses-item__title {
  font-weight: bold;
  text-align: center;
  font-size: 24px;
  margin-bottom: 15px;
}
. pluses-item__text {
  font-size: 16px;
  text-align: center;
}

Для блока .pluses-item задаем ширину 25% и расчитываем получить по 4 блока в ряд, но при отсутствии box-sizing: border-box; получаем следующий результат:

Ширина в 25% задается контенту и добавляется еще padding, поэтому ширина блока получается 25% + padding-left + padding-right и в родительский блок .pluses__flex по 4 блока уже не помещается

Поэтому всегда использую box-sizing: border-box; для абсолютно всех элементов

В Bootstrap Reboot box-sizing: border-box; для всех элементов добавлено по-умолчанию, поэтому при верстке с нуля всегда использую Bootstrap Reboot — можно почитать статью Сброс CSS стилей Bootstrap Reboot

Также по этой теме можно почитать на https://learn.javascript.ru/box-sizing

CSS | Свойство max-block-size — GeeksforGeeks

Улучшить статью

Сохранить статью

• Последнее обновление: 28 июн, 2022

Улучшить статью

Сохранить статью

Свойство CSS max-block-size используется для создания максимального размера элемента в направлении, противоположном направлению письма. Например, если направление письма горизонтальное, то max-block-size эквивалентен max-height , а если он в вертикальном режиме, то равен max-width .  

Синтаксис:

 максимальный размер блока: длина | процент | авто | нет | мин-содержание |
                максимальное содержание | фит-контент | наследовать | начальная | не установлен; 

Значения свойства:

• длина: Он устанавливает фиксированное значение, определенное в px, cm, pt и т. д. Допускаются отрицательные значения. Его значение по умолчанию равно 0px.
• процент (%): То же, что и длина, но размер задается в процентах от размера окна.
• auto: Используется, когда желательно, чтобы размер блока определялся браузером.
• нет: Используется, когда вы не хотите ограничивать размер коробки.
• max-content: Используется, когда вы предпочитаете max-width размеру окна.
• min-content: Используется, когда вы предпочитаете min-width размеру окна.
• fit-content: Используется, когда вы предпочитаете точную ширину размеру коробки.
• начальный: Используется для установки значения свойства max-block-size в значение по умолчанию.
• inherit: Используется, когда желательно, чтобы элемент наследовал свойство max-block-size своего родителя как свое собственное.
• unset: Используется для сброса максимального размера блока по умолчанию.

Примеры ниже иллюстрируют свойство max-block-size in CSS: 

Example 1:  

html

Выход:

. 0002   

Example 2:  

html

Выход:

. 0002   

Supported Browsers: The browsers supported by max-block-size property are listed below:

• Firefox 41
• Google Chrome 57
• Edge 79
• Opera 44
• Safari 12.1

Ссылка: https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size