ZorNet.Ru — сайт для вебмастера » HTML и CSS » Создание отступов свойством margin и padding

Создание отступов свойством margin и padding

Создавая оригинальный дизайн сайта, вам не обойтись без отступов на свойствах margin и padding, где выделяем разные элементы портала. Любой стиль не обходится без них, это может как изображение или название, везде нужно чтоб все корректно смотрелось. И бывает такое, что если брать за пример название, то они прилипло картинке или каркасу. То здесь как раз задействуем в CSS свойства margin и padding, которые решат эту проблему.

Здесь узнаете разницу между полями CSS и дополнением и как эти свойства влияют на пространство между элементами на веб-странице. Мы также обсудим разворот краев, также эффект использования разных единиц при создании сайтов с откликами и завершаем некоторые макеты трюков, которые вы можете сделать с полями CSS и дополнением.

Как сделать отступы в CSS? Свойства margin и padding

Рассмотрим подробнее, за что отвечают!

margin - Его переменяют, когда вам нужно сделать отступ и отрегулировать с внешней стороны, а если точнее объекты.

padding - Это как раз свойство будет работать внутри объекта, что там будут задаваться отступы по краям.

Если вы решите задать одинаковые отступы у самого объекта, то margin: 20px; поможет в этом. Где 20px вы сами редактируете, как вам нужно.

Но также есть совершенно другие свойства, которые будут работать на заданную сторону.

margin-top - здесь вы задаете отступ сверху;
margin-right - Это уже выставляете по справу сторону;
margin-bottom - свойство, что отвечает за снизу;
margin-left - Задаем отступ по левую сторону;

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

Находим класс, что отвечает за знаки к примеру zornet и под него стиль прописываем.

Код

.zornet {
padding: 15px; /* создаем отступ от блока до самого содержания - и все происходит по всем сторонам на 15 пикселей */
}

Теперь margin, что по по работе аналогичны, только с вешешней стороны.

padding-top - Задаем отступ по сверх;
padding-right - Задаем свойства отступа по правую сторону;
padding-bottom - свойство, создающие отступы снизу;
padding-left - отвечает за отступы по слева сторону;

Теперь как можно их пременить на интернет ресурсе.

Код

padding: 10px 20px 10px 7px; /* сверху 10px, справа 20px, снизу 10px, слева 7px */

Код

margin: 10px 20px 10px 7px; /* сверху 10px, справа 20px, снизу 10px, слева 7px */

Теперь вам не нужно прописывать различные коды, чтоб выровнять или сделать красиво, все делается через стили на элементах

Все в таком же положение, можно сделать в процентном соотношение.

Код

margin: 10% 25% 15% 9%; /* сверху 10%, справа 25%, снизу 15%, слева 9% */

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

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

20 Октября 2017 Просмотров: 2499 Комментариев: (2)

Поделиться в социальных сетях

Материал разместил

Kosten

Похожие материалы

Комментарии: 2

Порядок вывода комментариев:

Kosten 05 Декабря 2017 05:06¹

В образце больше присудив свойствам margin и padding согласно 1 значению, мы установили степь и отступы компонента с абсолютно всех четырех его краев. С целью этого для того чтобы определить различные масштабы полей и отступов с целью любой из сторон компонента, следует определять 2, 3 либо 4 аргумента через пробел. При этом в связи от количества значений результат станет различным.

Примеры:

margin: 5px; - одно значение.

Одно значение - Поля одинаковые со всех сторон.

margin: 5px 40px; - 2 значимости.

1. Определяет степь с верхней и исподней пределов.
2. Определяет степь с левосторонной и левой пределов компонента.

margin: 5px 40px 20px; - 3 значимости.

1. Определяет область с верхней пределы компонента.
2. Определяет степь с левосторонной и левой пределов компонента.
3. Определяет область с исподней пределы компонента.

margin: 5px 40px 20px 1px; - 4 значимости.

1. Определяет область с верхней пределы компонента.
2. Определяет область с левой пределы компонента.
3. Определяет область с исподней пределы компонента.
4. Определяет область с левосторонной пределы компонента.

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

Kosten 29 Декабря 2017 02:45²

Соответствующие правила CSS для подвешивания отступов.

Фокус на создание висячего отступа - это первый абзац абзаца. Это можно сделать, установив левое поле или левое заполнение. В приведенном ниже примере используется padding-leftдля его выполнения, но вы также можете использовать, margin-leftесли хотите.

Код

.hangingindent {
padding-left: 22px ;
}

Теперь когда весь абзац, по-видимому, покраснел вправо, нам нужно сделать первую строку с исходного левого поля. Для этого мы применяем отрицательное число к text-indentсвойству CSS . Поскольку положительные числа перемещают начало строки вправо отрицательные числа перемещают ее влево.

Код

.hangingindent {
padding-left: 22px ;
text-indent: -22px ;
}

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

Чтобы использовать код на своей странице, просто дайте абзацу классу «hangingindent» как показано в следующем примере.

Код

<p class="hangingindent">
This paragraph will have a hanging indent. Of course, to really see the effect, your paragraph should be a bit longer than this example.
<p>

Если вы измените имя класса вы должны, естественно, настроить как таблицу стилей так и тег абзаца HTML, ссылающийся на класс.

Альтернативный метод: использование списков определения HTML

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

Код

<dl>
<dt><a href="https://zornet.ru/">Hanging Indents in CSS and HTML</a></dt>
<dd><p>This article describes how you can create hanging indents on your web pages using CSS and HTML.</p></dd>
</dl>

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

Оставь свой отзыв