Приветствую всех зашедших на страницу моего блога! Сегодняшнюю публикацию я хочу посвятить важной теме, без изучения которой в дальнейшем у вас может возникнуть множество проблем: «Как в 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. Это стилевое свойство, которое применимо только к межстрочному расстоянию. Так, совместное использование тега, отвечающего за выделение абзацев, и верное указание данного свойства поможет сделать слитный текст читабельным.
Желаю удачи в практическом освоении материала! Не забывайте вступать в ряды подписчиков и делиться информацией с друзьями.
Пока-пока!
С уважением, Роман Чуешов
