Материал

24.03.16

Управление отступами в 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;">
 
На видно как изображение сместилось относительно родительского элемента.
vneshn-otstupi
 
Если же прописать 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-снизу.
 
margin-top
 
Также можно прописать значение auto. Здесь внешний отступ будет рассчитан браузером автоматически.
 
Еще одно значение inherit. Здесь параметры дублируются из родительского (вышестоящего по структуре) элемента.

Управление внутренними отступами в HTML на CSS при помощи свойства padding

Ситуация с параметром padding аналогична предыдущей (margin). Единственное и главное отличие в том, что здесь отступы задаются внутри элемента.
 
Например вам нужно задать внутренний отступ в ячейке таблицы. Нужно будет прописать следующее:
 
<td style="padding:5px;">Текст</td>
 
Таким образом вокруг слова "Текст" появятся внутренние отступы в 5 точек со все четырех сторон.
 
padding
 
Итак, за внешний отступ на CSS отвечает параметр margin, за внутренний отступ CSS - параметр padding. 
 
vneshnii-vnutr-otstup