Css border padding: css — Padding on div border

Leave a Comment / Css / By /

padding ⚡️ HTML и CSS с примерами кода

Свойство padding устанавливает значение полей вокруг содержимого элемента.

Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить поля только для указанных сторон.

Демо

Блоки
  • height
  • width
  • max-height
  • max-width
  • min-height
  • min-width
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • margin-trim
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • overflow
  • overflow-x
  • overflow-y
  • visibility

Синтаксис

/* Apply to all four sides */
padding: 1em;
/* vertical | horizontal */
padding: 5% 10%;
/* top | horizontal | bottom */
padding: 1em 2em 2em;
/* top | right | bottom | left */
padding: 5px 1em 0 1em;
/* Global values */
padding: inherit;
padding: initial;
padding: unset;

Значения

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.

Табл. 1. Зависимость от числа значений
Число значенийРезультат
1Поля будут установлены одновременно от каждого края элемента.
2Первое значение устанавливает поля от верхнего и нижнего края, второе — от левого и правого.
3Первое значение задает поле от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
4Поочередно устанавливается поля от верхнего, правого, нижнего и левого края.

Величину полей можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. При указании поля в процентах, значение считается от ширины родителя элемента.

Значение по-умолчанию: 0

Применяется ко всем элементам

Спецификации

  • CSS Basic Box Model
  • CSS Level 2 (Revision 1)
  • CSS Level 1

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>padding</title>
    <style>
      . layer {
        background: #fc3; /* Цвет фона */
        border: 2px solid black; /* Параметры рамки */
        padding: 20px; /* Поля вокруг текста */
      }
    </style>
  </head>
  <body>
    <div>
      Кондуктометрия мягко передает электронный способ
      получения независимо от последствий проникновения
      метилкарбиола внутрь.
    </div>
  </body>
</html>

Свойство box-sizing — способ расчета padding, border и width

Свойство box-sizing позволяет менять способ расчета размеров элемента.

По умолчанию добавление padding расширяет элемент: если мы задали ширину width 100px и padding-left в 20px, то реальная ширина элемента будет 120px.

А если мы зададим еще и border-left в 10px, то реальная ширина элемента станет 130px. То есть padding и border расширяют блок (и по ширине, и по высоте). Это поведение можно поменять с помощью box-sizing.

Синтаксис

селектор { box-sizing: content-box | border-box; }

Значения

Значение Описание
content-box И padding, и border расширяют блок.
border-boxНи padding, ни border не расширяют блок.

Значение по умолчанию: content-box.

Пример . Стандартное поведение

Сейчас оба блока имеют одинаковую высоту и ширину, однако у второго блока padding задан, а у первого — нет. Посмотрите, как отличаются их размеры:

<div>elem1</div> <div>elem2</div>#elem1 { width: 300px; height: 100px; margin-bottom: 10px; background: #f1f1f1; } #elem2 { padding: 50px; width: 300px; height: 100px; background: #f1f1f1; }

:

Пример .

Стандартное поведение

Сейчас оба блока имеют одинаковую высоту и ширину, однако у второго блока задана граница в

10px, а у первого — нет. Посмотрите, как отличаются их размеры:

<div>elem1</div> <div>elem2</div>#elem1 { width: 300px; height: 100px; background: #f1f1f1; } #elem2 { border: 10px solid black; width: 300px; height: 100px; background: #f1f1f1; }

:

Пример . Стандартное поведение

Сейчас второй блок имеет и padding, и границу в 10px:

<div>elem1</div> <div>elem2</div>#elem1 { width: 300px; height: 100px; background: #f1f1f1; } #elem2 { padding: 50px; border: 20px solid black; width: 300px; height: 100px; background: #f1f1f1; }

:

Пример .

Значение border-box

Добавим второму элементу значение

border-box для свойства box-sizing. Теперь размеры и первого и второго элемента станут одинаковыми:

<div>elem1</div> <div>elem2</div>#elem1 { width: 300px; height: 100px; background: #f1f1f1; } #elem2 { box-sizing: border-box; padding: 50px; border: 10px solid black; width: 300px; height: 100px; background: #f1f1f1; }

:

Смотрите также

  • свойство outline,
    которое делает границу, не расширяющую элемент

Модель коробки CSS

❮ Предыдущая Далее ❯

Все элементы HTML можно рассматривать как блоки.

Блочная модель CSS

В CSS термин «блочная модель» используется, когда речь идет о дизайне и компоновке.

Блочная модель CSS — это, по сути, блок, который охватывает каждый элемент HTML.

Он состоит из: полей, границ, отступов и фактического содержимого. На изображении ниже показана блочная модель:

Пояснения к различным частям:

  • Содержимое — Содержимое окна, в котором отображаются текст и изображения
  • Padding — очищает область вокруг содержимого. Прокладка прозрачная
  • Граница — Граница, огибающая отступы и содержимое
  • Margin — Очищает область за границей. Маржа прозрачный

Блочная модель позволяет нам добавлять границы вокруг элементов и определять пространство между элементами.

Пример

Демонстрация модели коробки:

div {
  ширина: 300 пикселей;
  граница: 15 пикселей сплошная зеленый;
отступ: 50 пикселей;
поле: 20 пикселей;
}

Попробуйте сами »

Ширина и высота элемента

Чтобы правильно установить ширину и высоту элемента во всех браузерах, вам необходимо знать, как работает блочная модель.

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

Пример

Этот элемент

будет иметь общую ширину 350 пикселей: 

div {
ширина: 320 пикселей;
отступ: 10 пикселей;
граница: 5 пикселей сплошного серого цвета;
маржа: 0;
}

Попробуйте сами »

Вот расчет:

320 пикселей (ширина)
+ 20 пикселей (левый + правый отступ)
+ 10 пикселей (левый + правый край)
+ 0px (левое + правое поле)
= 350px

Общая ширина элемента должна быть рассчитана следующим образом:

Общая ширина элемента = ширина + левый отступ + правый отступ + левый граница + правая граница + левое поле + правое поле

Общая высота элемента должна быть рассчитана следующим образом:

Общая высота элемента = высота + верхний отступ + нижний отступ + верх граница + нижняя граница + верхнее поле + нижнее поле

Проверьте себя с помощью упражнений

Упражнение:

Установите ширину элемента

на «200px».

<стиль>
 {
  : ;
}

<тело>
<дел>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor инцидент
ut Labore et dolore magna aliqua.

Начать упражнение

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

Справочник по HTML

Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

4 | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.

css — Отступы на границе div

спросил

Изменено 1 год, 6 месяцев назад

Просмотрено 138 тысяч раз

Я хочу добавить отступ к границе css. Потяните его внутри div, подальше от края. Возможно ли это с помощью css (css3 в порядке, webkit).

Вот дизайн.

Я сделал это, поместив элемент div внутри элемента div, а затем придав ему границу. Я хочу сделать разметку как можно более тонкой, поэтому я хочу использовать только один div, если это возможно.

Спасибо.

Вы должны иметь возможность сделать это с помощью свойства структуры CSS: