Управление отступами в html на css
С появлением свойств управления отступами на css у web разработчиков появились огромные возможности по управлению интерфейсом и дизайном страниц сайтов. До этого отступами управляли при помощи таблиц, что являлось значительно более сложным и объемным.
Рассмотрим основные свойства управления отсутпами.
Управление внешними отсупами в HTML на CSS при помощи свойства margin
Свойство css margin позволяет управлять именно внешними отступами. Допустим имеется изображение, для которого нужно указать внешние отсупы: 30 пикселей сверху, 20 слева, 10 справа и 5 снизу.
Для задания отсупа сверху мы пропишем: margin-top: 30px
Для задания отступа слева: margin-left: 30px
Отступ справа: margin-right: 10px
И снизу: margin-bottom: 5px
Можно все объединить, прописав следующее: margin: 30px 10px 5px 20px;
Например зададим эти отступы для изображения. Получаем следующий html код:
<img src="vnesh-otstup.jpg" style="margin: 30px 10px 5px 20px;">
На видно как изображение сместилось относительно родительского элемента.
Если же прописать margin: 30px, то отступы css будут одинаковые со всех четырех сторон и будут равны 30 пикселям.
Есть варианты указания двух и трех значений в спецификации: margin:10px 20px;. Данный параметр сделает так, что появятся внешние отступы на css сверху и снизу 10px, слева и справа 20px;
Три значения: margin:10px 20px; 30px;. Здесь сверху будет отступ 10 точек, слева и справа по 20, а снизу 30.
Часто для начинающих верстальщиков не всегда получается сразу запомнить все возможные комбинации, поэтому на начальных этапах можно использовать параметры: margin-top, margin-right, margin-left и margin-bottom. Top - вверх, right-право, left-лево, bottom-снизу.
Также можно прописать значение auto. Здесь внешний отступ будет рассчитан браузером автоматически.
Еще одно значение inherit. Здесь параметры дублируются из родительского (вышестоящего по структуре) элемента.
Управление внутренними отступами в HTML на CSS при помощи свойства padding
Ситуация с параметром padding аналогична предыдущей (margin). Единственное и главное отличие в том, что здесь отступы задаются внутри элемента.
Например вам нужно задать внутренний отступ в ячейке таблицы. Нужно будет прописать следующее:
<td style="padding:5px;">Текст</td>
Таким образом вокруг слова "Текст" появятся внутренние отступы в 5 точек со все четырех сторон.
Итак, за внешний отступ на CSS отвечает параметр margin, за внутренний отступ CSS - параметр padding.
Поделиться в соц. сетях: