Содержание страницы
внешний и внутренний отступы в cssДля более красивого отображения элементов на web-странице применяют внешний и внутренний отступы в css и на примерах мы это сейчас разберём.

Каждый элемент, будь это параграф, div, картинка или видео, - это некий блок, в котором можно сделать отступы как внутри с помощью свойства padding, так и снаружи с помощью margin.

В нашей организации на сайте http://www.kghi.ru можно купить диплом во Владивостоке, проконсультировавшись со специалистом.

В css прописываются эти свойства для отступов таким образом ( для примера взят параграф ):
cssCOPY
<style> p { margin: 20px 10px 30px 10px; padding: 10px 10px 14px 10px; } </style>
Вместо тега P вы пропишите свой элемент разумеется, для которого будут применены отступы.

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

Значения отступов.

  • Первое значение: отступ сверху;
  • Второе значение: отступ справа;
  • Третье значение: отступ снизу;
  • Четвёртое значение: отступ слева.
отступы margin и padding
В данном примере я сделал margin внешний отступ в css таким образом: сверху я прописал 20px, слева и справа по 10px ( как правило они для симметрии прописываются одинаковые ), и снизу указал 30px.

А для padding внутреннего отступа я указал: по 10px сверху, слева и справа, и 14px снизу.

Значение для отступов в свойствах margin и padding можно сокращать, при условии если они имеют одинаковую величину.
Из моего примера сокращённая запись будет иметь такой уже вид:
cssCOPY
<style> p { margin: 20px 10px 30px 10px; padding: 10px 10px 14px 10px; } </style>
То есть, когда отсутствует последняя числовая запись, в данном случае для отступа слева, то браузер автоматически подставляет для отступа слева такое же значение как и у значения справа.
И в моём случае отступы справа и слева будут по 10px что в margin, что в padding.

А если у вас одинаковые величины для внешних отступов сверху и снизу ( к примеру: 16px ), и так же одинаковые величины для внешних отступов слева и справа ( к примеру: 20px ), то запись будет иметь ещё более сокращённый вид:
cssCOPY
<style> p { margin: 16px 20px; } </style>
Соответственно для внутреннего отступа css запись делается идентично этой.

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

Для указания отдельного отступа применяются следующие свойства с одним значением:

Свойства отступа для каждой стороны.

  • margin-top: 3px; внешний верхний отступ;
  • margin-left: 4px; внешний левый отступ;
  • margin-right: 6px; внешний правый отступ;
  • margin-bottom: 10px; внешний нижний отступ.
Точно так же прописываются записи и для внутренних отступов, только нужно заменить margin на padding.

К примеру у вас для всех картинок img уже прописаны в css все отступы.
cssCOPY
<style> img { margin: 10px 20px 14px; padding: 6px; } </style>
То есть ( для уяснения ) внешний отступ имеет такие значения: сверху 10px, слева и справа: по 20px, и снизу 14px.
А внутренний отступ равен по 6px со всех 4-ёх сторон.

Допустим, вы решили поставить ещё картинку на страницу, но для неё вы хотите изменить только внешний отступ сверху, а остальные оставить как есть. И для выполнения этой задачи достаточно прописать class для этой картинки, и добавить в css дополнительную запись.
cssCOPY
<style> img.verx { margin-top: 40px; } <img class="verx" src="картинка.jpg" alt="" /> </style>
В итоге, добавленная вами картинка с классом verx примет все отступы прописанные в css для тега img, и изменит только внешний отступ для верхней стороны ( в нашем случае: 40px ).

Я постарался сделать описание для отступов css более детально, но если возникнут вопросы задавайте их через комментарии.
Дата публикации: 25.08.2018
Комментарии
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!