CSS. Свойства border, margin и padding

Эта инструкция позволит вам лучше понимать такие свойства CSS, как border, padding и margin. Эти свойства очень помагают разработчикам позиционировать элементы на странице в соответствии с макетом.

Давайте создадим div и присвоим ему свойства margin, padding и border.

Свойство Padding

CSS свойство padding определяет расстояние между границей элемента и его содержимым. Вы можете определить его следующим образом:

• padding-top: 10px;
• padding-right: 10px;
• padding-bottom: 10px;
• padding-left: 10px;

Эту запись можно сократить:

• padding:25px 50px 75px 100px;
  • сверху 25px
  • справа 50px
  • снизу 75px
  • слева 100px
  
  
• padding:25px 50px 75px;
  • сверху 25px
  • справа и слева 50px
  • снизу 75px
  
  
• padding:25px 50px;
  • сверху и снизу 25px
  • справа и слева 50px
  
  
• padding:25px;
  • все 25px

Внимание: значение padding добавляется к ширине элемента и зависит от фона элемента.

Иначе говоря у нас есть элемент div с классом div-1:

div.div-1{
width:150px;
padding: 25px;}

Браузер добавит к ширине элемента левый и правый padding. В результате мы получим элемент шириной 200px.

Свойство Border

CSS свойство border позволяет вам определять стиль и цвет границы элемента.

border-width

Свойство border-width применяется для определения ширины границы. Ширина задается в пикселях или с помощью одного из предопределенных значений: thin (тонкая), medium (средняя) или thick (толстая).

border-color

Свойство border-color применяется для определения цвета границы. Цвет может быть задан следующими способами:

• название — название цвета, например, «red»
• RGB — определяет RGB значение, например, «rgb(255,0,0)»
• Hex — определяет hex значение, например, «#ff0000»

border-style

• dotted: Определяет точетную границу
• dashed: Определяет пунктирную границу
• solid: Определяет толстую границу
• double: Определяет две границы. Расстояние между ними зависит от значения border-width
• groove: Определяет объемную вдавленную границу
• ridge: Определяет объемную выпуклую границу
• inset: Определяет границу так, что блок качется вдавленным
• outset: Определяет границу так, что блок качется выпуклым

Вы можете записать свойства границы элемента укороченным образом:

div.div-2{
	border:1px solid #ccc;
    }

Свойство Margin

CSS свойство margin определяет расстояние вокруг элемента. Margin освобождает расстояние вокруг элемента (снаружи от border). Margin не имеет цвета фона и всегда остается прозрачным.

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

• margin-top:100px;
• margin-bottom:100px;
• margin-right:50px;
• margin-left:50px;

Эту запись можно сократить:

• margin:25px 50px 75px 100px;
  • сверху margin 25px
  • справа margin 50px
  • снизу margin 75px
  • слева margin 100px
  
  
• margin:25px 50px 75px;
  • сверху margin 25px
  • справа и слева margin 50px
  • снизу margin 75px
  
  
• margin:25px 50px;
  • сверху и снизу margin 25px
  • справа и слева margin 50px
  
  
• margin:25px;
  • все четыре margin 25px

Используя значения margin по умолчанию вы можете расположить блок по центру грризонтально.

div.div-3{
	margin: 0 auto;
    }