Отступы в CSS: подробное рассмотрение

Параметр 'margin'

Параметр определяет все отступы в одном объявлении. Позволяет определять отрицательные значения.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
margin-top	Задают свойства отступов. Значения задаются в % (определяет отступ в % общей высоты/ширины документа), длиной (определяет фиксированный отступ) и автоматически (отступ задает браузер)
margin-right
margin-bottom
margin-left

Примеры:

p {margin: 2px}все четыре отступа будут иметь отступ, равный 2px. p {margin: 5px 10%}верхний и нижний отступ будут по 5px, левый и правый отступ будут составлять 10% общей ширины документа. p {margin: 5px 10% -2px}верхний отступ будет равен 5px, левый и правый отступ будут составлять 10% общей ширины документа, нижний отступ будет равен 2px. p {margin: 5px 10% -2px auto}верхний отступ будет 5px, правый отступ будет составлять 10% общей ширины документа, нижний отступ будет 2px, левый отступ будет задан браузером.

Параметр 'margin-bottom'

Данный параметр задает нижний отступ элемента. Позволяет определять отрицательные значения.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
Auto	Нижний отступ задает браузер
Length	Определяет фиксированный нижний отступ
%	Определяет нижний отступ в % от общей высоты документа

Примеры:

p{ margin-bottom: 5%} p{ margin-bottom: auto}

Параметр 'margin-left'

Этот параметр задает левый отступ элемента. Позволяет определять отрицательные значения.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
Auto	Левый отступ задает браузер
Length	Определяет левый отступ фиксированной ширины
%	Определяет левый отступ в % общей ширины документа

Примеры:

p{ margin-left: 2%} p{ margin-left: -5px}

Параметр 'margin-right'

Этот параметр задает правый отступ элемента. Позволяет определять отрицательные значения.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
Auto	Правый отступ задает браузер
Length	Определяет правый отступ фиксированной величины
%	Определяет правый отступ в % общей ширины документа

Примеры:

p{ margin-right: 2px} p{ margin-right: 10%}

Параметр 'margin-top'

Данный параметр задает верхний отступ элемента. Позволяет определять отрицательные значения.

Наследование: нет.

Возможные значения:

Значение	Описание
Auto	Верхний отступ задает браузер
Length	Определяет верхний отступ фиксированной ширины
%	Определяет верхний отступ в % от общей высоты документа

Примеры:

p{ margin-top: auto} p{ margin-top: -5px}

Лекция 8. Поля в CSS

Данные параметры определяют пространство между границей элемента и содержимым элемента.

Примеры

Этот пример показывает, как задать левое поле элементов списка.

2. <html>3. <head>4. <style type="text/css">5. li {padding-left: 0.5cm}6. </style>7. </head>8. 9. <body>10. <ol>11. <li>элемент списка</li>12. <li>элемент списка</li>13. <li>элемент списка</li>14. </ol>15. </body>16. </html>

Этот пример показывает, как задать правое поле элементов списка.

18. <html>19. <head>20. <style type="text/css">21. li {padding-right: 3cm}22. </style>23. </head>24. 25. <body>26. <ol>27. <li>элемент списка</li>28. <li>элемент списка</li>29. <li>элемент списка</li>30. </ol>31. </body>32. </html>

Этот пример показывает, как задать верхнее поле элементов списка.

34. <html>35. <head>36. <style type="text/css">37. li {padding-top: 1cm}38. </style>39. </head>40. 41. <body>42. <ol>43. <li>элемент списка</li>44. <li>элемент списка</li>45. <li>элемент списка</li>46. </ol>47. </body>48. </html>

Этот пример показывает, как задать нижнее поле элементов списка.

50. <html>51. <head>52. <style type="text/css">53. li {padding-bottom: 2.5cm}54. </style>55. </head>56. 57. <body>58. <ol>59. <li>элемент списка</li>60. <li>элемент списка</li>61. <li>элемент списка</li>62. </ol>63. </body>64. </html>

Пример показывает, как с помощью параметра padding задать все поля в одном объявлении. Допускается определение от одного до четырех значений.

66. <html>67. <head>68. <style type="text/css">69. li.first {padding: 2.5cm}70. li.second {padding: 1cm 2cm}71. </style>72. </head>73. 74. <body>75. <ol>76. <li class="first">элемент списка с одинаковыми полями со всех сторон</li>77. <li>элемент списка</li>78. <li class="second">элемент списка, который имеет верхнее и нижнее поле, равное 1 см, 79. а левое и правое поля — равные 2 см</li>80. </ol>81. </body>82. </html>