Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях
Рубрика:Основы HTML

Как в html сделать отступы, чтобы ваши читатели наслаждались чтением, а не уходили сразу после открытия страницы

Приветствую всех зашедших на страницу моего блога! Сегодняшнюю публикацию я хочу посвятить важной теме, без изучения которой в дальнейшем у вас может возникнуть множество проблем: «Как в html сделать отступы». Что касается конкретики, то вы сможете найти информацию о создании всех возможных отступов для построения удобного сайта с привлекательным интерфейсом.

Я детально расскажу вам как убрать или наоборот добавить отступы между строками или между картинками, каким образом форматировать расположение отдельных сторон различных объектов и конечно же прикреплю пример программного кода. Приступим же!

Разметка вроде верная, а общий вид ужасный!

Всем на начальных порах сайтостроения знакома ситуация, когда вроде html-разметка выполнена верно, однако вид созданной страницы не вызывает восторга: между блоками разных цветов белые полосы и вообще почему этот текст слеплен в одно цельное полотно!? Ответом на все эти недочеты является неверно заданные отступы между объектами веб-ресурса.

Так, в одной из своих прошлых публикаций о создании блоков на языке html я описал, из каких 4 свойств состоят данные элементы. Поэтому стоит знать, что существует 2 вида отступов: внутренние (padding) и внешние (margin).

Классная разметка

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

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

  1. К ключевым словам через дефис можно дописывать название стороны, значение которой хотите поменять (например, margin-bottom);
  2. В зависимости от количества указанных размерностей меняются и редактируемые группы параметров:
  • При указании 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="http://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. Это стилевое свойство, которое применимо только к межстрочному расстоянию. Так, совместное использование тега, отвечающего за выделение абзацев, и верное указание данного свойства поможет сделать слитный текст читабельным.

Желаю удачи в практическом освоении материала! Не забывайте вступать в ряды подписчиков и делиться информацией с друзьями.

Пока-пока!

С уважением, Роман Чуешов


Прочитано: 19 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: