Как правильно измерять макет учитывая padding?

@Natalisvet · Регистрация: 22.03.2019

Студворк — интернет-сервис помощи студентам

Здравствуйте. По умолчанию добавление padding расширяет элемент: если мы задали ширину width 100px и padding-left в 20px, то реальная ширина элемента будет 120px. А если мы зададим еще и border-left в 10px, то реальная ширина элемента станет 130px. То есть и padding, и border расширяют блок (и по ширине, и по высоте).

Как тогда правильно измерять макет ?Как правильно, чтобы не мучиться с расчетами, видимо я что то не правильно понимаю. Например мы измеряем и у нас блок размером width: 600px; если мы будем использовать padding: 0px 30px 0px 30px; то это увеличит размер элемента width: 660px; будет. А если много вложенных элементов то сложно будет высчитывать, учитывая все padding что бы размеры не увеличивались.Вижу что часто использую padding, знаю что margin не увеличивает размеры.

@gogolik · 07.02.2020, 14:21

Natalisvet, используйте box-sizing. С таким кодом блок будет ровно 600px, независимо от всего:

CSS
1
2
3
4
5
6
.block {
  width: 600px;
  padding: 0 30px;
  border: 10px solid #000;
  box-sizing: border-box;
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Natalisvet 0 / 0 / 0 Регистрация: 22.03.2019 Сообщений: 10

	Как правильно измерять макет учитывая padding? 07.02.2020, 13:41. Показов 2097. Ответов 1 Метки css (Все метки) Здравствуйте. По умолчанию добавление padding расширяет элемент: если мы задали ширину width 100px и padding-left в 20px, то реальная ширина элемента будет 120px. А если мы зададим еще и border-left в 10px, то реальная ширина элемента станет 130px. То есть и padding, и border расширяют блок (и по ширине, и по высоте). Как тогда правильно измерять макет ?Как правильно, чтобы не мучиться с расчетами, видимо я что то не правильно понимаю. Например мы измеряем и у нас блок размером width: 600px; если мы будем использовать padding: 0px 30px 0px 30px; то это увеличит размер элемента width: 660px; будет. А если много вложенных элементов то сложно будет высчитывать, учитывая все padding что бы размеры не увеличивались.Вижу что часто использую padding, знаю что margin не увеличивает размеры. 0

Как правильно измерять макет учитывая padding?

Решение