Блочная модель

Для веб-браузера элементы страницы представляют небольшие контейнеры или блоки. Такие блоки могут иметь различное содержимое - текст, изображения, списки, таблицы и другие элементы. Внутренние элементы блоков сами выступают в качестве блоков.

Блоком может быть элемент body, div и так далее. От других элементов он отделяется некоторым расстоянием - внешним отступом, которое описывается свойством CSS margin.

Далее начинается сам элемент. И в начале идет его граница, которая в CSS описывается свойством border.

После границы идет внутренний отступ, который в CSS описывается свойством padding. Внутренний отступ определяет расстояние от границы элемента до внутреннего содержимого.

Далее идет внутреннее содержимое, которое также реализует ту же блочную модель и также может состоять из других элементов, которые имеют внешние и внутренние отступы и границу.

Пример: 
       <style>
       div{
       margin: 15px; /* внешний отступ */
       padding: 11px; /* внутренний отступ */
       border: 3px solid red; /* границы шириной в 3 пикселя сплошной красной линией */
       }
       </style>
       </head>
       <body>
       <div>
       <p>Первый блок</p>
       </div>
       <div>
       <p>Второй блок</p>
       </div>
       </body>
       </html>

Если мы явным образом не указываем значения свойств margin, padding и border, то браузер применяет предустановленные значения.

Внешние отступы

Свойство margin определяет отступ элемента от других элементов или границы внешнего контейнера. 

       margin-top:отступ сверху
       
       margin-bottom: отступ снизу
       
       margin-left: отступ слева
       
       margin-right: отступ справа

Можно вместо четырех свойств задать одно: 

 
       div{
       margin: 30px 20px 15px 25px;
       
       border: 3px solid red;
       }

Свойство задается в формате:

margin: отступ_сверху отступ_справа отступ_снизу отступ_слева;

Или одинаково для всех сторон: 

  
       div{
       margin: 25px;
       }

Внутренние отступы

Свойство padding задает внутренние отступы от границы элемента до его внутреннего содержимого. 

  
      padding-top: отступ сверху
      
      padding-bottom: отступ снизу
      
      padding-left: отступ слева
      
      padding-right: отступ справа

также можно использовать сокращенную запись:

padding: отступ_сверху отступ_справа отступ_снизу отступ_слева; 
      div.outer{
      
      margin: 25px;
      
      padding: 30px 25px 35px 28px;
      
      border: 2px solid red;
      }

одно значение для всех отступов: 

      div.outer{
      
      margin: 25px;
      
      padding: 30px;
      
      border: 2px solid red;
      }

Границы

Граница отделяет элемент от внешнего по отношению к нему содержимого. Грубо говоря распологается между margin и padding. При этом граница является частью элемента.

Для настройки границы используется несколько свойств:

Свойство border-width может принимать значения в единицах измерения: em, px или cm

константные значения: 

    thin (тонкая граница - 1px), 
    medium (средняя по ширине - 3px), 
    thick (толстая - 5px)

Свойство border-color в качестве значения принимает цвет CSS.

Свойство border-style оформляет тип лини: 

 
    none: граница отсутствует
    
    solid: граница в виде обычной линии
    
    dashed: штриховая линия
    
    dotted: линия в виде последовательности точек
    
    double: граница в виде двух параллельных линий
    
    groove: граница имеет трехмерный эффект
    
    inset: граница как бы вдавливается во внутрь
    
    outset: аналогично inset, только граница как бы выступает наружу
    
    ridge: граница также реализует трехмерный эффект
 
 
    <style>
    div{
    width: 100px;
    height:100px;
    border-style: solid;
    border-color: red;
    border-width: 2px;
    }
    </style>

можем определить цвет, стиль и ширину границы для каждой из сторон: 

    /* для верхней границы */
    border-top-width
    border-top-style
    border-top-color
    
    /* для нижней границы */
    border-bottom-width
    border-bottom-style
    border-bottom-color
    
    /* для левой границы */
    border-left-width
    border-left-style
    border-left-color
    
    /* для правой границы */
    border-right-width
    border-right-style
    border-right-color

Свойство border

border: 2px solid red;

границы для отдельных сторон:

 
    border-top
    border-bottom
    border-left
    border-right
border-top: 2px solid red;

Радиус границы

Свойство border-radius позволяет округлить границу. Принимает значение радиуса в пикселях или единицах em. 

    <style>
    div{
    width: 100px;
    height:100px;
    border: 2px solid red;
    border-radius: 30px;
    }
    </style>

можем указать четыре значения для установки радиуса у каждого углов: border-radius: 15px 30px 5px 40px;

Можно их устанавливать по отдельности. Например: 
   
    border-top-left-radius: 15px;	/* радиус для верхнего левого угла */
    border-top-right-radius: 30px;	/* радиус для верхнего правого угла */
    border-bottom-right-radius: 5px;	/* радиус для нижнего левого угла */
    border-bottom-left-radius: 40px;	/* радиус для нижнего правого угла */

Также border-radius поддерживает возможность создания эллиптических углов. То есть угол не просто скругляется, а использует два радиуса, образуя в итоге душу эллипса: border-radius: 40px/20px; В данном случае полагается, что радиус по оси X будет иметь значение 40 пикселей, а по оси Y - 20 пикселей.

из барахолкимодель блоков