Приветствую всех зашедших на страницу моего блога! Сегодняшнюю публикацию я хочу посвятить важной теме, без изучения которой в дальнейшем у вас может возникнуть множество проблем: «Как в html сделать отступы». Что касается конкретики, то вы сможете найти информацию о создании всех возможных отступов для построения удобного сайта с привлекательным интерфейсом.
Я детально расскажу вам как убрать или наоборот добавить отступы между строками или между картинками, каким образом форматировать расположение отдельных сторон различных объектов и конечно же прикреплю пример программного кода. Приступим же!
Разметка вроде верная, а общий вид ужасный!
Всем на начальных порах сайтостроения знакома ситуация, когда вроде html-разметка выполнена верно, однако вид созданной страницы не вызывает восторга: между блоками разных цветов белые полосы и вообще почему этот текст слеплен в одно цельное полотно!? Ответом на все эти недочеты является неверно заданные отступы между объектами веб-ресурса.
Так, в одной из своих прошлых публикаций о создании блоков на языке html я описал, из каких 4 свойств состоят данные элементы. Поэтому стоит знать, что существует 2 вида отступов: внутренние (padding) и внешние (margin).
Padding отвечает за расстояние между внутренней границей и контентом расположенных на странице элементов, а margin – за расстояние между внешней границей указанного элемента и внутренним краем окна браузера или родительского объекта.
В html предусмотрены механизмы для форматирования сдвигов как отдельно с каждой стороны, так и группами:
- К ключевым словам через дефис можно дописывать название стороны, значение которой хотите поменять (например, margin-bottom);
- В зависимости от количества указанных размерностей меняются и редактируемые группы параметров:
- При указании 1-го параметра (margin: 5px) объект меняется со всех сторон;
- 2-х параметров – меняются группы верх-низ, право-лево;
- 3-х – верх, лево-право, низ;
- 4-х – задается расстояние каждой стороне.
Время для примеров
Для понимания ниже приведен код, в котором меняются значения внешних и внутренних отступов.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>margin</title> <style> body { margin: 0; } .parent { margin: 20px; background: orange; padding: 10px; border: 3px solid yellow; } .child { border: 3px solid yellow; margin-bottom: 5px ; } img{ width: 300px; margin-left: 120px; margin-top: 10px; } p{ padding-left: 30px; } </style> </head> <body> <div class="parent"> <div class="child"> <p>В данной желтой рамке на оранжевом фоне написан черный текст примера.</p> </div> <img src="https://romanchueshov.ru/wp-content/uploads/2016/06/code.jpg"> </div> </body> </html> |
При запуске кода в браузере вы увидите не таблицу, а 2 блока, выделенных желтой рамкой.
Так, первый div стилизованного класса parent сдвинут на 20 пикселей от каждой стороны окна браузера и от внутреннего контента. В div-е класса child задан отступ вниз от внутренней границы parent на 5 пикселей. Теперь посмотрите на тег <p>.
Для абзаца был указан внутренний отступ слева от края второго блока на 30 пикселей. Что касается изображения, то я решил поменять его положение, увеличив расстояние сверху от стилизованного блока child на 10 пикселей и слева – на 120 px.
Обратите также внимание на стиль оформления контейнера body. Параметру margin был присвоен 0 для того, чтобы убрать установленное по умолчанию расстояние от краев окна браузера.
Между строк
Еще одним интересным инструментом редактирования отступов является line-height. Например, line-height: 1.5. Это стилевое свойство, которое применимо только к межстрочному расстоянию. Так, совместное использование тега, отвечающего за выделение абзацев, и верное указание данного свойства поможет сделать слитный текст читабельным.
Желаю удачи в практическом освоении материала! Не забывайте вступать в ряды подписчиков и делиться информацией с друзьями.
Пока-пока!
С уважением, Роман Чуешов