• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Отступы Padding и Margin и как работают в CSS (Определение полей и отступов на сайте с использованием CSS)
Отступы Padding и Margin и как работают в CSS
Kosten
Дата: Воскресенье, 18.02.2018, 18:16 | Сообщение 1
Администраторы
Сообщений:18250
Награды: 55


Многие разработчики сайтов применяют отступы, которые при любом создание интернет сайта обязаны быть, так как это необходимо. Но некоторые не понимают, как можно все сделать на стилях CSS, где применяются такие элементы, как Padding и Margin, что можно закрепить к любому элементу дизайн и задать отступ, что для адаптивности ресурса, будет отличным решением. На эту тему писал пару статей, про свойство margin и также общий мануал, как создать отступы на сайте, что затрагивает оба значение, что думаю эта заметка не лишним для понимания. Здесь не чего сложного нет, просто нужно понять, что здесь подробно хочется донести.

Каскадные таблицы стилей или CSS используются для форматирования внешнего вида, как текста, фона, цветов и границ всех элементов, это заголовков, абзацев и других текстов, что внутри HTML документов. Они также помогают отделять контент от презентации, делая веб документ и страницу HTML - чистой и хорошо структурированной. Это помогает при редактировании страниц в будущем.



В чем разница между полями и отступами?

Маржа в CSS расширяет область вокруг элемента и заголовка, так же абзаца внутри HTML документа. Вы можете указать верхнее или левое или нижнее или правое поле для каждого элемента документа HTML. Поля также прозрачны и без границ. В то время как Margin очищает область вне элемента, Padding очищает область внутри элемента. Другими словами, прокладка очищает область внутри границы элемента. Если вы укажете фон, это также повлияет на заполнение.

Как использовать поля?

Маржа устанавливается вокруг элемента, чтобы очистить элементы вне его. Пространство вокруг становится яснее, делая элемент отчетливо видимым. В CSS вы можете установить верхнее, правое, нижнее и левое поля для элемента либо индивидуально, либо в одной строке. Подстрочный код более эффективен по мере сокращения строки кода, что приводит к более быстрой загрузке файла CSS.

Значения:



Существует 4 возможных значения на полях:

1. auto - браузер устанавливает значение автоматически
2. length - задает margin в px, em итак далее.
3. Percent% - это значение устанавливает маржу в процентах в зависимости от ширины элемента вне его.
4. Inherit - значение маржи наследуется от его родительского

Как указать поля в CSS

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

Код
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 5px;

Здесь как можно заметить, что каждый стиль отвечает за свою сторону.

Сокращенная маржа

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

Код
margin: 0px 10px 5px 10px;

Этот код определяет сначала верхнюю, а затем правую, нижнюю и, наконец, левую сторону элемента.



Как использовать Padding

Как указано выше, прокладка очищает область внутри границы элемента. Если вы укажете фон, это также повлияет на заполнение. Значения заполнения для каждой стороны - верхняя, левая, правая и нижняя - могут применяться индивидуально или с использованием сокращенного свойства, изменяя прописку на одной строке кода.

Значения:

1.1. length - определяет длину отступов в пикселях, em и точках.
1.2. % - указывает длину в процентах, относящуюся к квадрату вне его
1.3. Авто - браузер автоматически присваивает значения дополняемости элементу
1.4. Inherit - это говорит браузеру наследовать значение дополнения от родительского элемента

Как указать paddings в CSS

Padding, например Margins, можно указать отдельно или с помощью сокращенного кода.

Определение полей по отдельности:

Код
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;

Где также можете пременить проценты, хотя выше в значениях все описано по этой теме.

Стенография:

Код
padding : 10px 5px 10px 5px;

Существуют и другие способы указания дополнений и полей. Давайте посмотрим на каждый:

Код
padding:25px 0px;

Эта строка сокращенного кода указывает значения маржи для верхней и нижней части 25 пикселей и нулевой пиксель для левой и правой сторон.

Код
padding: 25px;

Это еще один короткий код для указания значения заполнения для всех сторон.

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

Установка полей и paddings с помощью CSS в сводке

Margin и Padding установлены для очистки области вокруг и внутри элемента. Маржа используется для очистки пространства вокруг элемента, в то время как прокладка используется для очистки пространства внутри элемента. Элементы означают, что заголовки, абзацы и другой текст используют сами документы.
Прикрепления: 0798232.jpg(13.1 Kb) · 0770464.png(15.2 Kb) · 9602933.png(7.4 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Отступы Padding и Margin и как работают в CSS (Определение полей и отступов на сайте с использованием CSS)
  • Страница 1 из 1
  • 1
Поиск: