Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css » Margin-padding

Свойства margin и padding

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

Свойство padding определяет внутреннее расстояние между границей блока и содержимым самого блока


Регулировать значения полей и отступов можно с помощью значений представленных в виде ключевых слов: top, right, bottom, left. Или достаточно все значения записать в сокращенной форме. Чтобы легче освоить данную тему предлагаю взглянуть на небольшой пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
 <head>
  <meta http-equiv="Content-Type" content="text/html; 
charset=utf-8" >
  <title>margin</title>
<style type="text/css">
body { 
margin: 0; /* Убираем отступы */
   }
.pad {
border: 1px solid black; /* Параметры рамки */
background: #eee; /* Цвет фона */
	padding:20%; /* Поля вокруг текста */
	width:300px;
	margin-left: 20%;/* Отступ слева */
} 
p.mar {
border: 3px solid #666; /* Параметры рамки */
padding: 10px; /* Поля вокруг текста */
margin: 10px; /* Отступы вокруг */
background:#FFE446
}  
</style>
 </head> 
 <body> 
  <div class="pad">
   <p class="mar">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
 sed diem nonummy nibh euismod tincidunt ut lacreet
 dolore magna aliguam erat volutpat. Ut wisis enim ad minim
 veniam, quis nostrud exerci tution ullamcorper 
suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
   </p>
  </div> 
 </body>
</html>

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

свойства margin, padding в CSS

Если вы решили записать значения полей для блока вот так: margin:50px 50px 40px 40px; то следует помнить, что значения записываются по часовой стрелке: верхнее, правое, нижнее, левое поле. Аналогично будет и для свойства padding. Полезно также знать, что для выравнивания блока по центру достаточно в свойствах записать вот такую вот строчку:

margin: 0 auto


наверх