УРОК 9. ЭКВИЛИБРИРУЕМ ВНУТРИ КОНТЕЙНЕРА 1

Проверка задания 3

На уроке 8 вы получили задание:

• Открыть html-файл "project6.html";
• Поэкспериментируйте с отступами двух контейнеров друг от друга и краёв браузера, используя все варианты и частные варианты селектора margin;
• Выделите все глаголы жирным шрифтом, а прилагательные курсивом, подчеркните имена собственные.

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

А сегодня мы научимся эквилибрировать текстовым содержимым контейнеров, как самых <div>, так и внутри них <p> - абзацев. Для этого мы откроем наш html-файл "project6.html", уберём наш домашний дизайн текста, стерев поставленные теги, возвратим отступы в начальный вариант и переименуем в очередной по номеру "project7.html":

Сохраняем файл под новым именем (File => Save As).

Новый проектный html-файл "project7.html".

Открываем новый html-файл в браузере, чтобы видеть обновлённый вариант и все изменения потом:

Так вновь выглядят наши контейнеры в данный момент.

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

Теперь познакомимся с ещё один селектором CSS, который очень похож по своему назначению на селектор margin. Это селектор padding. Если селектор margin создаёт отступы контейнера от других контейнеров и границ браузера на экране, то padding действует в точности также, но уже внутри самого контейнера, отодвигая его содержимое от его границы внутрь.

Наглядный пример разницы между функциями селекторов margin и padding.

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

Чтобы наглядно увидеть, как работает селектор padding, для начала обнулим значения селектора margin, но сохраним сам селектор:

Мы обнулили значения селектора margin: <div style="margin: 0px;">.

После сохранения обновлений в html-файле (File => Save) мы обновляем сам браузер круговой стрелкой слева на панели и получаем вот такой интерфейс.

Вы спросите, почему же сохранились отступы между абзацами <p> и контейнерами <div>. Изначально так и задумано, чтобы выделять блоки и контейнеры.

В первом контейнере <div> у нас 3 блока <p>, или контейнера. Так как они внутри контейнера <div>, то он для всех них - родительский, т.е. является большей матрёшкой, а они - меньшими матрёшками внутри. И вот так устроен весь принцип размещения множественности разноуровневых контейнеров в веб-дизайне!

Характеристики селектора padding

Значения характеристики пишутся также просто, например, 20px.

Отступы также бывают со всех четырёх сторон, поэтому также часто указываются все четыре значения, например: 10px 20px 15px 25px. Ведь аналогично селектору margin, не правда ли!

Сам селектор padding оформляется так:

padding: 30px 50px 35px 55px;

Напоминаю, что в конце характеристики любого селектора ВСЕГДА ставиться знак ";".

Пример тега с селектором и его характеристикой:

<div style="padding: 30px 50px 35px 55px;"> ... </div>

Если в стилях уже есть другие селекторы, то знак ";" в конце характеристики одного селектора как раз отделяет его от очередного селектора и его характеристики, например, в нашем проекте:

<div style="margin: 0px; padding: 30px 50px 35px 55px;"> ... </div>

Впишем в первый контейнер селектор padding и его значения:

Цветовая гамма Sublime Text показывает, что у меня всё корректно оформлено в первом контейнере <div>.

Сохраняем обновления в html-файле (File => Save) и обновляем снова браузер с проектом. Получаем вот такие изменения.

Что мы получили? Те отступы, которые и вписали, но уже не контейнера от края браузера или соседнего контейнера <div>, а содержимого этого контейнера от его краёв.

Открыв в браузере инструменты вёрстки и выделив первый контейнер, мы видим, что зелёным цветом показаны отступы содержимого внутри контейнера от его краёв.

Детальный вид правой панели инструментов вёрстки.

Рассмотрим подробнее панель инструментов вёрстки данной страницы. Мы выделили курсором первый контейнер <div>. Там показаны значения селекторов. Они продублированы в нижней части панели слева, а справа схематично показаны наши отступы. Всё крайне просто и доступно для понимания!

Внутри схемы вы видите синий прямоугольник со значениями - это ширина и высота пространства с содержимым контейнера. Запомните этот нюанс. Он нам ещё пригодиться, и ни раз.

А вот селектор border (граница) нам сейчас пригодится для наглядности. Давайте, включим его в дизайн первого контейнера пока по моему умолчанию:

border: 4px solid black;

Тогда получится так:

<div style="margin: 0px; padding: 30px 50px 35px 55px; border: 4px solid black;"> ... </div>

Теперь посмотрим, что у нас изменилось в браузере после его обновления:

Изменения в дизайне первого контейнера <div>.

Теперь мы наглядно чётко видим, как сработал селектор padding, отодвинув содержимое контейнера от его краёв.

А следующим шагом с помощью селектора border мы очертим границы каждого блока внутри этого контейнера, включив его в <p>:

<p style="padding: 20px 30px 20px 30px; border: 4px solid black;"> ... </p>

Чтобы хорошо различать каждый абзац как контейнер, я выделил каждый из них в отдельную строку.

Изменения в дизайне страницы и содержимого первого контейнера <div>.

Теперь мы видим работу селектора padding в каждом отдельном блоке первого контейнера. Уменьшим толщину границ рамки блоков до 2 пикселей, чтобы было поэстетичнее:

Мы изменили характеристику border в каждом блоке: 2px solid black.

Изменение толщины границы блоков внутри первого контейнера в 2 раза.

Ну, а теперь применим уже внешний отступ самого контейнер со всех сторон на 25 пикселей:

<div style="margin: 25px; padding: 30px 50px 35px 55px; border: 4px solid black;"> ... </div>

Я оставил курсор как раз на месте исправления внешнего отступа margin - 25 пикселей.

Изменение расположения первого контейнера на экране браузера.

Как мы видим после сохранения изменений html-файла и обновления браузера:

1) первый контейнер <div> изменился в своих размерах, т.к. отодвинулся от краёв экрана браузера и нижестоящего контейнера;

2) первый контейнер ужался в ширину, но растянулся в длину, т.к. площадь контейнера должна сохраниться из-за имеющегося фиксированного содержимого внутри - контент;

3) все дочерние блоки (контейнеры) внутри материнского контейнера <div> также автоматически ужались в ширину, но по необходимости увеличились в длину, т.к. имеют внутри своё содержимое - контент.

Вот он, принцип матрёшки, в действии!

Разновидности селектора padding

Не хотите себя утруждать расписыванием всех внутренних отступов padding, если нужен только один? Нет проблем! Для этого также как и у margin существуют варианты селектора:

• padding-top - отступ только сверху
• padding-right - отступ только справа
• padding-bottom - отступ только снизу
• padding-left - отступ только слева.

Вот с ними вы уже поработаете в рамках самостоятельной практики.

Практика

Задание 4.

1. Назначьте трём блокам <p> первого контейнера <div> различные индивидуальные селекторы и их персональные значения - в каждом блоке используйте все четыре селектора (см. "Разновидности селектора padding");
2. Назначьте второму контейнеру <div> внешние отступы: 22px 34px 45px 30px;
3. Назначьте второму контейнеру <div> жирную чёрную рамку толщиной 6 пикселей;
4. Назначьте содержимому (контенту) второго контейнера <div> внутренний отступ от краёв контейнера: 20px 30px 25px 35px;
5. Заключите содержимое (контент) второго контейнера <div> в отдельный блок-абзац <p>;
6. Назначьте этому одиночному блоку жирную чёрную рамку толщиной 3 пикселя;
7. Назначьте содержимому (контенту) этого одиночного блока <p> внутренний отступ от краёв контейнера: 22px 33px 44px 11px.

На следующем уроке мы продолжим эквилибрировать содержимым контейнера в "матрёшке" с помощью размерного селектора CSS.

Если вам понравилось, подписывайтесь на мой канал!

PhD Alexander G. Buychik, info@buychik.ru, +79217702472