Изучаем margin padding и border

Создаем основную структуру сайта с помощью margin, padding и border. Изучаем box-model.

Транскрипт урока

Теперь нам просто необходимо создать отступы как между блоками, так и внутри блоков, а также было бы неплохо обозначить границы. Отступы между блоков создаются с помощью свойста margin, давайте добавим отступ у блока с классом header. .header { margin: 20px; } А если нам нужно указать конкретный отступ сверху, мы можем написать margin-top: 40px; Аналогично работают margin-bottom, left и right. Также, существует три вида скоращенного метода записи: margin: top, right, bottom, left; margin: top, left/right, bottom; margin: top/bottom, left/right; Теперь давайте коснемся отступов между контентом внутри блока и границей блока. Такие отступы называют padding. Давайте добавим его, и посмотрим, что получится. div { padding: 20px; } Как вы видите, теперь вокруг текста образовались отступы высотой в 20 пикселей. Варианты с top, bottm, right и left работают аналогично. И последнее для этого урока свойство — border. С помощью него задается граница вокруг слоя. Работает оно так: border: 3px dashed black; Первое значение определяет толщину границы, второе — стиль, а третье — цвет. В данном случае мы создали границу толщиной 3px, пунктирную и черного цвета. Но чаще всего границы делают сплошными, что обозначается словом solid. Давайте проверим. Все, что я вам рассказал — это называется box-model блочных тегов. Размер каждого тега состоит из размера контента + padding + толщина границы + margin. (картинка). Это знание поможет вам при вычислении размеров ваших блоков.

Оставьте ваш комментарий или вопрос к этому уроку