Параметры стилей padding и margin как применять на практике а также все варианты использования. Категория: CSS. Опубликовано: 0. Здравствуйте, в этой статье мы рассмотрим механизмы и команды с помощью которых мы сможем задавать отступы для всех элементов нашей страницы. В CSS есть два вида отступов это внешний и внутренний отступ и применение их на практике поможет каждому структурировать свой сайт и создавать на нем нужные параметры. Ну что же приступим к изучению и начнем с внутреннего отступа. Для того чтобы можно было задать внутренний отступ на сайте есть целый ряд команд, позволяющих задавать отступ с конкретной стороны. Для того чтобы задать отступ слева нужно применить команду padding- left и указать размер в одной из величин которые приняты в CSS и чаще всего это пиксели. Отступ справа задается командой padding- right и также само указываете конкретную цифру в одном из принятых единиц измерения. Для того чтобы задать внутренний отступ сверху нужно применить команду padding- top и указать размер в принятых величинах. Для задания отступа снизу блока нужна команда padding- bottom с размером. Для того чтобы сократить размер записываемого кода то нужно применить команду padding и сейчас я покажу как это можно сделать. В данной записи я указал для всех краев отступ в десять пикселей. В данной записи первое значение задает размер сверху, второе справа, третье снизу и четвертое значение слева. Также можно задать не все значения а только два и тогда первое значение отвечает за отступ сверху и снизу а второе слева и справа. Пример: padding: 1. Также можно задать только три значения и тогда первая цифра отвечает за отступ сверху, второе за отступ слева и справа а третье- отступ снизу. Все эти варианты помогут вас существенно сократить размер файла стилей и вам самому будет проще разобраться в нем. Атрибут стиля margin. Для того чтобы задать внешний отступ между блоками нам нужно воспользоваться атрибутом стиля margin и сейчас мы посмотрим как все это можно выполнить. Данный атрибут очень похож на предыдущий и с одной только разницей что задает внешний отступ. Для задания верхнего отступа нам понадобится команда margin- top и вот как это выглядит на практике. Теперь определенный нами элемент будет иметь верхний отступ от соседних блоков на десять пикселей. Для отступа снизу мы применим атрибут margin- bottom и укажем точный размер. Например для того чтобы задать нижний отступ на двадцать пикселей нам нужно добавить следующую команду: margin- bottom: 2. Отступы слева и справа задаются командами margin- left и margin- right соответственно и для этого нам понадобится следующий код: Для отступа слева на семнадцать пикселей: margin- left: 1. И для отступа справа на тот же расстояние: margin- right: 1. Также как и в предыдущем примере вы можете сократить запись записав просто margin и указав по порядку все параметры через пробел. Подскажите, как указать расстояние между абзацами в CSS? Блоки текста в HTML разделяются между собой при. HTML*, CSS*, Блог компании Netcracker (IMG:https Прежде всего давайте вспомним определение полей и отступов согласно спецификации W3C. Примерно так: margin: 1. И также само задает первое значение отступ сверху, справа, снизу и слева соответственно. Теперь давайте посмотрим как это все выглядит на практике. Для примера давайте возьмем каркас с статьи про блоки в CSS. Давайте для начала мы заполним блок основного контента текстом произвольного содержания. Теперь мы видим что текст прилип непосредственно к границам блока и это выглядит не очень красиво и сейчас мы это исправим при помощи внутреннего отступа. Высота строки CSS; Расстояние между строк HTML; line-height наследуется от предка к потомку; line-height и HTML тег span .
Пропишем в файл стилей следующую команду. Точка перед словом content означает что мы задаем параметр для классов а content это название нашего класса. Ну а в скобках мы указываем команду а через двоеточие параметры отступов. На практике это выглядит так: Как мы видим у нас получилась рамка размером в двадцать пикселей. Теперь чтобы показать как работает параметр margin зададим для все того же блока отступы от остального содержимого.
0 Комментарии
Оставить ответ. |
АвторНапишите что-нибудь о себе. Не надо ничего особенного, просто общие данные. Архивы
Март 2019
Категории |