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

Скачать материалы:

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

Как запустить видеоурок:

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

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

Начнем с блочной модели в 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!