Раз в неделю мы отправляем дайджест с самыми популярными статьями.

Основы работы с блочной моделью (box model)

Блочная модель в HTML — пример файла index.html с комментариями

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="boxmodel.css">
    <title>Блочная модель</title>
</head>
<body>

<h1>Заголовок 1</h1>

<ul>
    <li>Список 1</li>
    <li>Список 2</li>
    <li>Список 3</li>
</ul>
<h2>Заголовок 2</h2>
<ol>
    <li>Список 1</li>
    <li>Список 2</li>
    <li>Список 3</li>
</ol>
</body>
</html>

Блочная модель в CSS — пример файла boxmodel.css с комментариями

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

/*Каждый тег, отображаемый в теге <body> находится в невидимом прямоугольнике - в блоке*/
/*Блочная модель это инструмент для описания границ и интервалов между блоками*/

/*Блочные элементы*/

/*Содержимое блочных элементов занимает всю ширину контейнера*/
/*Каждая блочный элемент размещается рядом с другим*/

/*Примеры блочных элементов : */
/* h1 , h2,  h3,  p,  ul,  li*/

/*Строчные элементы*/
/*Каждый элемент который не является блочным, зовётся строчным элементом/
/*Содержимое такого тега не пытается занять всю ширину контейнера*/

/*Примеры строчных элементов: */
/* a, img , input, label*/

/*Преобразование блочных элементов в строчные элементы*/
/*Позволит вам отображать элементы горизонтально, а не вертикально.*/

ul li {
    display: inline;
}

/*Части блочной модели*/

/*Область с контентом*/
/*Содержит основной контент (тексты, картинки, и так далее.)*/
/*Она возьмет столько вертикального пространства, сколько ей потребуется для отображения всего контента*/

/*Отступы (padding)*/
/*Отступ это прослойка на всех краях блока*/
/*Отступы могут могут быть добавлены к верхней части, правой, нижней или к левой стороне блока*/

/*Границы*/
/*Границы могут быть добавлены к верхней, нижней, правой или левой стороне блока начиная с отступов*/

/*Внешние отступы (margin)*/
/*Внешний отступ может быть добавлен к правой, левой нижней или верхней стороне блока начиная от границ*/

/*Блочная модель: Размеры*/
/*Полный размер блока рассчитывается путем добавления всех этих свойств:*/
/* Свойства блока: width + padding-left + padding-right + border-left + border-right + margin-left + margin-right*/

/*Применение свойств блочной модели*/
/*Можно применить любое количество свойств за раз*/
/*Отступы (padding)*/
h2 {
    padding-top: 4px;
    padding-bottom: 8px;
    padding-right: 9px;
    padding-left: 3px;
}

/*Так же можно задать все эти свойства в одну строку:*/
h2 {
    padding: 4px 9px 8px 3px;
    /*верхний правый нижний левый*/
}

/*Границы (border)*/
/*Вы можете добавить границы к любой стороне блока*/
h2 {
    border-width: 14px;
    border-style: solid;
    border-color: blue;
}

/*Так же можно задать все эти свойства в одну строку:*/
h2 {
    border: 4px solid blue;
    /*ширина стиль цвет*/
}

/*Вы можете установить границу только к одной стороне блока*/
h2 {
    border-bottom: 8px dotted forestgreen;
    /*ширина стиль цвет*/
}

/*Внешние отступы*/
/*Можно применить любое количество свойств за раз*/
h2 {
    margin-top: 8px ;
    margin-right : 5px;
    margin-bottom: 7px;
    margin-left: 12px;
}
/*Так же можно задать все эти свойства в одну строку*/
h2 {
    margin: 8px 5px 7px 12px;
       /*cверху cправа cнизу слева*/
}

/*Когда использовать отступы (padding)?*/
/*Он используется, чтобы контролировать размер блока без корректировки размера содержимого внутри блока*/

/*Когда использовать внешние отступы (margin)?*/
/*Внешние отступы используются, чтобы контролировать расстояние между блоками*/

/*Стили браузера по умолчанию*/
/*У браузера есть набор собственных стилей, на тот случай, когда не применяются другие*/

/*Смена стандартных стилей браузера*/
/*Вы можете использовать один селектор для каждого тега на странице*/
html, body, h1, h2, h3, p, ol, ul, li, a {
    padding: 0;
    border: 0;
    margin: 0;
}

/* Важно начать писать CSS код именно с этой строки, в целях достижения согласованности между браузерами */
/* После сброса CSS стилей */

/* тег <body> */
/* Добавьте отступы, чтобы оттолкнуть все дочерние элементы от краёв элемента <body> */
body {
    padding: 20px 20px 20px 20px;
}

/* Заголовки */
/* Добавьте внешние отступы, чтобы создать расстояние между блоками */
h1{
    margin: 10px 0 15px 0;
}
h2{
    margin: 10px 0 20px 0;
}

/* Нижние границы*/
/* Нижние границы, визуально, разделяют блоки*/
/* Вы можете использовать отступы (padding), чтобы добавить расстояние между контентом и границами */
h1{
    border-bottom: 1px solid #CCCCCC;
    padding-bottom: 3px;
}
h2{
    border-bottom: 1px solid #CCCCCC;
    padding-bottom: 3px;
}
/*Отступы так же используются для регулирования расстояния между списками и элементами списка */
ol{
    padding: 0 0 0 50px;
}