От первого html тега, до SEO оптимизации порталов
Украина
+380 63 85 62 538

Свойства margin, padding, border

margin-padding-border

Свойства margin, padding, border

Мы уже знаем, что страница html документа состоит с элементов. Каждый элемент имеет в себе какое-то содержание. Каждый элемент имеет свою границу, по умолчанию эта граница не видимая для пользователя. Также элементы могут иметь внутренний отступ и внешний.

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

Границы элементов

Разберем значение границы области любого с элементов на странице, которое задается свойством border и должно в себе содержать три значения:

  • величина — px или %
  • тип — none | solid | dotted | dashed | double | groove | ridge | inset | outset
  • цвет — любой цвет

Все это записывается одной строкой вот такого вида border: 1px solid black;здесь мы указали рамку вокруг элемента в 1 пиксель, задали ей тип сплошной линии и черный цвет.

С размером и цветом все понятно, давайте разберем значения типов нашей рамки:

  • none — нет типа ( по умолчанию)
  • solid — сплошная линия
  • dotted — точечная линия
  •  dashed — пунктирная линия
  •  double — двойная линия
  • groove — двухцветная с изгибом
  • ridge — аналогично предыдущей с инвертированием
  • inset — две стороны темные, две темные
  • outset — как предыдущий только меняются стороны

Мы указывали всему элементу рамку, когда писали свойство border, но можно задавать рамку какой-то одной стороне элемента, и пишется это следующим образом:

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

Закругленные края границы элемента

Помимо рамки элементу можно задавать закругленность углам. Можно задавать значения как одному углу, так и всем сразу.

  • border-top-left-radius: величина | %
  • border-top-right-radius: величина | %
  • border-bottom-left-radius: величина | %
  • border-bottom-right-radius: величина | %

Выше мы задаем значение закругленности всем четырем углам по отдельности, а вот так можно это сделать более сокращенной записью:border-radius: 20px. Помимо такого задания значения можно еще задавать вот так: border-radius: 20px 10px. Но будьте внимательны, первая часть значения (20px) это два угла верхний левый и нижний правый, то есть работает по диагонали, а вот вторая часть значения (10px) это верхний правый и нижний левый.

Также можно одной строкой записать значения для всех четырех сторон вот таким образом: border-radius: 20px 10px 20px 10px, где значения идут с верхней левой стороны и по часовой. Со скругленными углами я думаю мы разобрались, приступим к другим не менее важным свойствам элементов.

Внутренние отступы в элементах страницы

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

  • padding-top: величина | %
  • padding-right: величина | %
  • padding-bottom: величина | %
  • padding-left: величина | %

То есть вы видите, что можно для каждой стороны блока можно задавать свои значения отступа. Так делается очень редко по причине того, что есть более сокращенные записи. Вот пример такого сокращенного значения отступа: padding: 10px. Вот сейчас мы задали отступ для всех сторон в 10 пикселей.

А теперь проведем небольшой эксперимент, давайте создадим параграф с количеством текста на три строки в браузере и во второй строке по средине любое слово возьмем в span и зададим ему некий id, после этого в стилях пропишем этому span цвет фона, рамку и внутренний отступ в 20px, сохраняемся и смотрим в браузере на результат.

Padding и его поведение

На скриншоте четко видно, что с права и с лева отступы сработали у нашего span элемента, а вот с верху и с низу произошли интересные перемены. Так вот, все, что мы видим в браузере на самом деле не есть плоским, каждая строка с верху до низу идет на неком уровне по оси Z. И по нашему примеру мы видим, что чем ниже строка, тем она ближе к нам. Мы еще об этом поговорим попозже. сейчас же вернемся к нашим отступам.

Давайте просмотрим второй вариант записи внутреннего отступа для элементов: padding: 20px 10px. Первое число отвечает за вертикаль (верх и низ), а второе за горизонталь (лево и право).

Еще одним значением может быть трех числовая запись: padding: 20px 15px 10px, где первое значение 20px — верх (top), второе значение 15px — лево и право, а третье значение 10px — это низ (bottom).

Ну и последнее значение, которое состоит с четырех частей: padding: 20px 10px 20px 10px, ну и здесь все просто, по часовой стрелке начиная с верху — top, right, bottom, left.

Внешние отступы margin

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

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

Давайте в наших стилях проделаем следующее, зададим вот такое значение: *{margin: 0;}, это указывает нашему браузеру, что каждый элемент не имеет внешних отступов совсем. Посмотрите, что с этого выходит на странице, все как бы слиплось друг с другом.

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

  • margin-top: величина | % | auto
  • margin-right: величина | % | auto
  • margin-bottom: величина | % | auto
  • margin-left: величина | % | auto

Здесь все понятно, для каждой из сторон мы задаем свое значение отступов. А вот такая запись: margin: 20px задает отступы со всех сторон на одинаковое расстояние. Ну и для напоминания:

  • margin: 20px 10px — вертикаль — горизонталь
  • margin: 20px 15px 10px — top горизонталь bottom
  • margin: 20px 10px 20px 10px — по часовой с верху
  • margin: 20px auto — по вертикали 20px, а по горизонтали по центру

Чтобы лучше усвоить это в голове, проставьте значения разными способами и уделите внимание какой способ, где уместнее применять.

Работа со свойством overtflow

Есть ситуации, в которых содержимое какого-либо фиксированного по ширине и высоте элемента не помещается в нем и тогда происходит вытекание этого содержимого за пределы элемента. В таком случае есть у нас свойство задающее следующие значения: overflow: visible | hidden | scroll | auto. По умолчанию стоит значение visible, что говорит показывай все, даже все то, что не помещается внутри. Значение hidden говорит свойству overflow обрежь все под чистую.

Но есть еще такое значение, как scroll, а вот это значение не вынесет за пределы содержимое, но даст возможность скролить содержимое, которое можно перелистать мышей. Но в данном случае скролл будет применен и к тем элементам, которые даже вмещают содержимое, а нам это не нужно. Вот здесь на выручку идет последнее значение auto, которое автоматически подставит значение наиболее удобное в нашем случае.

Но помимо этого всего можно задавать значения принудительно по осям x и y:

  • overflow-x: visible | hidden | scroll | auto
  • overflow-y: visible | hidden | scroll | auto

Здесь я думаю понятно, что по иксам, это вправо, а по игрикам это вниз.

Применение свойства float

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

Элемент, которому задается свойство float со значением к примеру left, будет задано следующее: Он прижмется к левому краю и все что за ним идет будет его обтекать с права. На простом примере рассмотрим, как это происходит на деле:

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

Чтобы вам проще было понять принцип этой работы предлагаю следующее. Представьте себе документ в ворде, вся страница — это body, картинка на странице, это зеленый div, а текст на странице — синий. Мы указываем, что текст (содержимое) будет обтекать картинку с права, а она сама прижмется к левой стороне. Теперь мы уже не можем печатать текст над картинкой, нам доступно все что с права и внизу картинки.

Float на практике

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

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

Если двум элементам задать свойство float со значением left, но находящиеся под одним родителем, тогда они начнут обтекать друг друга. То есть первый станет в лево, а справа станет за ним второй, не под него, а за ним, ибо он тоже со свойством float:left.

Что делать если у меня три элемента, два с которых обтекают друг друга через свойство float:left, а третий должен быть пониже этих двоих, но не под ними.

Свойство clear

На изображении выше я привел простой пример, когда находясь в одном родителе три элемента div влияют друг на друга через float. Первому и второму я задал свойство float:left и они выровнялись по левому краю, но третий ушел частично под них и здесь я применил второе свойство clear:both, которое говорит обтекать не справа предыдущий элемент, а начинать под ним, как и заметно на правой части картинки.

Свойство позиционирования position

position: static | relative | absolute | fixed — вот так пишется это свойство и имеет свои четыре значения.

  • static — идет по умолчанию в данного свойства
  • relative — относительное смещение с того места, где он был до этого (top, left, right, bottom)
  • absolute — абсолютное позиционирование относительно родителя, !ноесли он сам(родитель) имеет позиционирование
  • fixed — позиционирование сугубо с учетом окна браузера и при этом намертво фиксируя свое положение

Relative

Давайте немного поговорим о всем этом деле. Со static все понятно, он и в Африке статик ))), а вот как же работает relative? Здесь нет высшей математики, все довольно таки просто. Когда мы задаем любому элементу position:relative, тогда происходит его позиционирование относительно самого себя при помощи дополнительных свойств (top, left, right, bottom), которые уже указывают расстояние и точку отсчета этого позиционирования.

  • top: величина | % | auto
  • right: величина | % | auto
  • bottom: величина | % | auto
  • left: величина | % | auto

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

Absolute

Теперь посмотрим на элемент со свойством absolute. Итак любой элемент, к которому применено свойство position:absolute и указаны координаты при помощи все тех же (top, left, right, bottom), перемещается в заданное место.НО!!! это в случае, когда родитель данного элемента имеет тоже любое позиционирование. Если же родитель его не имеет, то координаты начнут свой отсчет от дедушки, если и у него нет позиционирования, то уже у самого body. Другими словами отсчет начнет идти от любого элемента имеющего позиционирование и являющимся каким то прародителем данному элементу.  :-) Надеюсь это понятно.

  1. РоманРоман09-29-2020

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

  2. АндрейАндрей03-17-2020

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

Написать ответ

.