Блочная модель в CSS. Рамки, внутренние и внешние отступы

В этом видеоуроке мы рассмотрим:

  • Что такое коробочная модель (боксовая модель) и в чем ее смысл?
  • Как прописать рамки элементам в таблице стилей?
  • Как прописать внутренние и внешние отступы (поля) элементам?
  • Как записать свойства padding и margin в сокращенном виде?
  • Как убрать поля, которые задаются в стилях браузера?
  • В чем отличие свойства text-indent от padding и margin?

Скачать материалы:
Скачать 7-ой видеоурок по CSS Размер: 13.41 MB, скачали: 523 раз.
Скачать исходники к 7 видеоуроку по CSS Размер: 29.01 kB, скачали: 428 раз. 
Как запустить видеоурок:

  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.

Ссылки и псевдоклассы, тема безусловно интересная. Но сейчас мы косвенно коснемся еще более интересной темы — верстки, которую будем рассматривать чуть позже (в 10 и 11 уроках по CSS). В этом видеоуроке мы разберем коробочную модель, рамки и отступы.

Что такое блочная модель?

Начнем с блочной модели в CSS. Ее также называют боксовой (или коробочной), так как в английском языке слово box означает «коробка». На своих экранах (внизу этой статьи есть скрины из видеоурока) вы видите боксовую модель. В чем ее смысл? В самом центре находится текст. Мы знаем, что к тексту, как и к изображению, можно применить рамку, что и делает свойство border. А вот что же такое внутренний и внешний отступы, мы разберем в этом видеоуроке.

Свойства padding и margin

Разберемся с теорией. Padding – это свойство, задающее расстояние между текстом и рамкой, а margin – свойство, задающее расстояние между рамкой и внешними объектами. Благодаря этим свойствам, мы можем очень точно управлять элементами на странице. На этом с теорией все. Перейдем к практике.

Открываем страницу index.html. Нам нужно определиться с объектами, с которыми мы будем работать. Пусть это будет заголовок «Добро пожаловать на мою страничку мыслей.» и первый абзац «Данная страничка посвящена одной истории. Истории о том, зачем я создал сайт http://info-line.net». Переходим в код, видим заголовок h1 и абзац. Давайте пропишем классы этим элементам. Первому — box1, а второму — box2.

 <h1>Добро пожаловать на мою страничку мыслей.</h1>
 <p><i>Данная страничка посвящена одной
 

Сохраняем и переходим в документ style.css. Прописываем здесь классы box1 и box2. Теперь зададим им свойства. Давайте пропишем им фоновый цвет — так нам будет легче контролировать расстояние между рамкой и текстом.

 .box1 {
 background-color: #CCFF33;
 }
 

Рамка (свойство border)

Теперь разберемся со свойством border (рамка). Border – свойство записанное в сокращенной форме. Давайте сначала запишем его в полной форме.

Первое свойство — border-width (ширина рамки). Что такое ширина рамки? Это ширина той красной области, которую вы видите на экране. Ее значение может быть как в абсолютных, так и в относительных величинах. Давайте поставим, например, 3 пикселя.

Следующее свойство — border-style (стиль рамки). Их восемь штук: dotted, dashed, solid, double, groove, ridge, inset, outset. Наиболее часто используются только первые четыре. Dotted – это рамка точками. Dashed – рамка штрихами. Solid – сплошная рамка. Double – двойная рамка. Остальные стили рамки вы можете применить и посмотреть результаты уже на собственном экране. Давайте поставим dotted.

Переходим к следующему свойству — border-color. Наверняка вы уже догадались, что это за свойство. Это цвет рамки. Здесь все так же, как и с табличным цветом. Нам нужно указать лишь код. Давайте укажем черный.

 .box1 {
 background-color: #CCFF33;
 border-width: 3px;
 border-style: dotted;
 border-color: #000;
 }
 

А теперь давайте укажем такие же свойства, но с другими значениями классу box2. Рамку поставим в два пикселя. Цвет пусть будет белый, и стиль рамки — штрих.

 .box2 {
 background-color: #CCFFCC;
 border-width: 2px;
 border-style: dashed;
 border-color: #fff;
 }
 

Сохраняем и смотрим.

Теперь давайте свойство border запишем в сокращенном виде, и потом будем разбираться с внешними и внутренними отступами. Сокращенная запись делается в таком порядке: border-width | border-style | border-color. Прописываем свойство border и копируем значения. Три ранее прописанных свойства удаляем.

 .box1 {
 background-color: #CCFF33;
 border: 3px dotted #000;
 }
 .box2 {
 background-color: #CCFFCC;
 border: 2px dashed #fff;
 }
 

Сохраняем и проверяем. У нас ничего не должно измениться. Все правильно. Переходим обратно в код.

Внутренние и внешние отступы (padding и margin)

Разберемся с внутренними и внешними отступами: padding и margin.Но сначала посмотрим снова на нашу боксовую модель. Напомню еще раз: свойство padding – это расстояние между текстом и рамкой border, а свойство margin – это расстояние между рамкой border и другими элементами.

Внутренние отступы (padding)

Сначала разберемся с внутренним отступом — со свойством padding. Padding – это тоже свойство, записанное в сокращенной форме. В полное форме оно записывается как padding-top, padding-right, padding-bottom и padding-left. Значения указываются в абсолютной или относительной величине. Все это складывается в свойство padding – сокращенную форму. Чтобы было проще, представьте себе круглые часы. Их можно разделить на 4 части. Первая часть находится вверху, вторая — справа, третья — внизу, четвертая — слева. В таком же порядке записываются и свойства padding и margin. Если отступ должен быть везде одинаков, то указывается только одно значение. Если же отступы сверху и снизу, а также справа и слева одинаковы, то указывается сначала отступ сверху, а потом отступ справа — всего два значения. Сейчас разберем это на примере.

Допусти, нам нужен везде один отступ в три пикселя.

 .box1 {
 background-color: #CCFF33;
 border: 3px dotted #000;
 padding: 3px;
 }
 

Сохраняем, проверяем. Все правильно. Наш заголовок сдвинулся от рамки на 3 пикселя со всех сторон. То есть рамка текста у нас сейчас примерно по три пикселя от каждой стороны.

Теперь давайте зададим отступы от верхнего и нижнего края по три пикселя, а от левого и правого — по пятнадцать.

 .box1 {
 background-color: #CCFF33;
 border: 3px dotted #000;
 padding: 3px 15px;
 }
 

Сохраняем. Смотрим снова. Все у нас получилось.

Теперь зададим свой отступ от каждой из сторон. Отступ сверху пусть будет 3 пикселя, отступ справа — 15 пикселей, снизу — 5 пикселей, слева — 80 пикселей.

 .box1 {
 background-color: #CCFF33;
 border: 3px dotted #000;
 padding: 3px 15px 5px 80px;
 }
 

Сохраняем и проверяем. Все как мы и указали.

Давайте теперь зададим внутренние отступы второму объекту. Пускай они будут со всех сторон по 15 пикселей.

 .box1 {
 background-color: #CCFF33;
 border: 3px dotted #000;
 padding: 15px;
 }
 

Сохраняем. Вот что у нас получилось.

Внешние отступы (margin)

Теперь пришло время разобраться с внешними отступами. Внешний отступ — это отступ рамки до внешних элементов. Браузер изначально задает свои внутренние и внешние отступы. Чтобы это исключить, можно в самом верху описать свойства для всех классов, то есть для всех элементов. Это прописывается так: сначала идет «*», потом открываются фигурные скобки, а дальше прописывается как обычный класс: padding: 0; margin: 0 .

 * {
 padding: 0;
 margin: 0;
 }
 

Сохраняем и посмотрим, что получается. Как мы видим, у нас исчезло расстояние между заголовком и абзацем. Чтобы это подкорректировать и добавить расстояние, нам нужно воспользоваться свойством margin. Переходим в код и задаем это свойство. Оно аналогично свойству padding. Запись происходит так же. Укажем отступ в 10 пикселей со всех сторон.

 .box1 {
 background-color: #CCFF33;
 border: 3px dotted #000;
 padding: 3px 15px 5px 80px;
 margin: 10px;
 }
 

Сохраняем. Смотрим, что произошло. Заголовок получил внешний отступ со всех сторон и от всех элементов вокруг него на 10 пикселей.

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

 .box1 {
 background-color: #CCFF33;
 border: 3px dotted #000;
 padding: 3px 15px 5px 80px;
 margin: 10px 0;
 }
 

А второму элементу — нашему абзацу — зададим нижний отступ от изображения. Просто пропишем свойство margin-bottom.

 .box2 {
 background-color: #CCFFCC;
 border: 2px dashed #fff;
 padding: 15px;
 margin-bottom: 10px;
 }
 

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

В конце этого видеоурока хочу прояснить отличия свойств padding и margin от text-indent. Свойство text-indent – это тоже отступ, но это красная строка — отступ идет только у первой строки. Давайте вспомним, где мы его применяли. Он применялся к классу text1. А text-1 – это текст «Я работал на фрилансе». Если мы добавим в тег <pre> чуть больше текста, то он просто разойдется на несколько строк, а отступ будет только у первой строки. Думаю, с этим понятно.

Вы прошли этот видеоурок. Теперь в качестве домашнего задания просто попрактикуйтесь с пройденными свойствами. Благодаря ним можно создать невероятно красивые элементы на сайте. Попробуйте использовать все значения свойства border-style и присвоить свойства padding и margin не только элементу текста, но и изображению.

На этом я заканчиваю данный видеоурок. До встречи в следующем видеоуроке, в котором мы познакомимся со списками в CSS!

Подпишись на info-line:

Получать новые уроки на e-mail:

7 комментариев на “Блочная модель в CSS. Рамки, внутренние и внешние отступы”

  1. Иннокентий 7 июля 2011 в 2:48 #

    Доброй ночи). Урок понятен в принципе, единственное я не понял как понять цвет текста? У меня был прописан class голубого цвета, я его удалил и цвет стал чёрным и как увеличить размер рамки? Спасибо.

    • Олег Зубцов 7 июля 2011 в 11:29 #

      Цвет текста меняется свойством color. Размер рамки можно увеличить с помощью свойства border-width.

      Пример:

      color: #339933;
      border: 10px solid #333;
      /* свойство border записано в сокращенном виде, где первое значение (10px) является значением ширины рамки (border-width) */
      

  2. Иннокентий 7 июля 2011 в 15:45 #

    Всё, ок. Был не очень внимателен значит. Извини, спасибо.

  3. Надежда 9 декабря 2011 в 13:03 #

    Олег, а дизайн этого сайта тоже с помощью «коробочной модели» создан? Такие окошки как «Новые уроки», «Рубрики», «Архивы», «Ошибка?»

    Как можно такому боксу задать фиксированные размеры (ширину, например)?

    И можно ли сделать такой дизайн, чтобы левый бокс, содержащий меню, не уезжал наверх с прокруткой длинного текста в центральной части? Например — центральная широкая колонка — текст, левая колонка — оглавление раздела, и оглавление всегда находится на экране перед читателем сайта, а прокручивается вверх только текст?

    • Олег Зубцов 9 декабря 2011 в 15:55 #

      Олег, а дизайн этого сайта тоже с помощью «коробочной модели» создан? Такие окошки как «Новые уроки», «Рубрики», «Архивы», «Ошибка?»

      Да.

      Как можно такому боксу задать фиксированные размеры (ширину, например)?

      div#block {
      width: 240px; /* ширина блока */
      height: 80px; /* высота блока */
      }
      

      Подробнее в 10 видеоуроке по CSS — info-line.net/css/videoku...nogo-maketa.html

      И можно ли сделать такой дизайн, чтобы левый бокс, содержащий меню, не уезжал наверх с прокруткой длинного текста в центральной части? Например — центральная широкая колонка — текст, левая колонка — оглавление раздела, и оглавление всегда находится на экране перед читателем сайта, а прокручивается вверх только текст?

      Можно, с помощью позиционирования. Подробнее в 12 видеоуроке по CSS — info-line.net/css/videoku...e-elementov.html

      • Надежда 14 декабря 2011 в 13:51 #

        Спасибо, Олег. Пытаюсь разобраться.

        Только пока не поняла, как зафиксировать на странице левый бокс с текстовым меню, а не изображения.

        • Олег Зубцов 14 декабря 2011 в 14:25 #

          Только пока не поняла, как зафиксировать на странице левый бокс с текстовым меню, а не изображения.

          С помощью фиксированного (fixed) позиционирования.

Оставить ответ