Отступ текста в HTML при помощи margin
Когда вы размещаете текст на сайте он находится в каком-то теге. Это может быть тег блока <div>, тег таблицы <table>, абзаца <p>, секции <section> и так далее.
Мы можем задать отступ для тега в котором находится текст при помощи CSS свойства margin.
Делается это так:
Здесь мы воспользовались атрибутом style и в нём указали нужное CSS свойство, задав тексту отступ слева 20px. Так же мы можем задать для нашего блока или другого тега класс и потом в отдельном CSS файле дописать для него стили.
HTML:
CSS:
При помощи этого свойства мы можем задать разные отступы тексту в HTML:
- margin-left — расстояние слева
- margin-right — расстояние справа
- margin-top — расстояние сверху
- margin-bottom — расстояние снизу
Так же можно одновременно в одной строке задать одинаковые или разные отступы со всех сторон:
- margin: 10px; — делаем отступ текста 10px со всех сторон
- margin: 15px 30px; — задаём отступ срерху и снизу по 15px, а справа и слева по 30px
- margin: 15px 25px 35px 45px; — отступ сверху 15px, слева – 25px, снизу – 30px, справа – 45px
Вместо пикселей вы так же можете задавать %, em, rem и другие единицы.
Отступ текста в HTML при помощи padding
Этот способ очень похож на предыдущий, но если margin задавал отступ до текста как бы снаружи тега, то padding будет задавать отступ внутри.
Так же можно присвоить класс в HTML коде или воспользоваться уже существующим и дописать это свойство ему:
CSS:
С его помощью так же можно задать разные отступы текста в HTML:
- padding-left — слева
- padding-right — справа
- padding-top — сверху
- padding-bottom — расстояние снизу
- padding: 25px; — отступ со всех сторон.
Отступ текста html при помощи неразрывного пробела
Сразу скажу что я этот способ не люблю и не рекомендую, но иногда он может понадобится. Суть его заключается в том что в HTML есть специальный тег, который позволяет добавлять неразрывный пробел
- Если вы поставите этот тег в тексте между слов или вначале строки то он создаст отступ равный по ширине 1 пробелу. Поставив несколько вы можете увеличить расстояние между словами.
- Если поставить между строк то он создаст вертикальный отступ равный по высоте одной строке. Дописав несколько (каждый с новой строки) можно увеличить это расстояние.
HTML:
Отступ текста в HTML при помощи text-indent
Если вам нужно задать отступ в HTML не для всего текста на странице, а лишь только для первой строчки одного или нескольких абзацев, то это можно сделать при помощи свойства text-indent
HTML:
Что делать если отступ не появляются?
Бывают ситуации, когда вы задаёте отступ текста HTML одним из предложенных способов, а он не применяется.
Причин здесь может быть несколько. Наиболее распространённые описаны в этой статье: «Почему не работают CSS-стили?»
Если вы знаете ещё какие то способы как сделать отступ текста HTML напишите их в комментариях. Если статья была для вас полезной — делитесь ей в социальных сетях. Так вы помогаете мне развивать сайт.
Успехов вам в оформлении ваших сайтов и не только!
С уважением Юлия Гусарь
impuls-web.ru
Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. В табл. 1 показаны варианты выравнивания блока текста.
| Выравнивание по левому краю | Выравнивание по правому краю | Выравнивание по центру | Выравнивание по ширине |
|---|---|---|---|
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Наиболее распространенный вариант — выравнивание по левому краю, когда слева текст сдвигается до края, а правый остается неровным. Выравнивание по правому краю и по центру в основном используется в заголовках и подзаголовках. Следует иметь в виду, что при использовании выравнивания по ширине в тексте между словами могут появиться большие интервалы, что не очень красиво.
Для установки выравнивания текста обычно используется тег абзаца <p> с атрибутом align, который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега <div> с аналогичным атрибутом align, как показано в табл. 2.
| Код HTML | Описание |
|---|---|
| <p>Текст</p> | Добавляет новый абзац текста, по умолчанию выровненный по левому краю. Перед абзацем и после него автоматически добавляются небольшие вертикальные отступы. |
| <p align="center">Текст</p> | Выравнивание по центру. |
| <p align="left">Текст</p> | Выравнивание по левому краю. |
| <p align="right">Текст</p> | Выравнивание по правому краю. |
| <p align="justify">Текст</p> | Выравнивание по ширине. |
| <nobr>Текст</nobr> | Отключает автоматический перенос строк, даже если текст шире окна браузера. |
| Текст<wbr> | Разрешает браузеру делать перенос строки в указанном месте, даже если используется тег <nobr>. |
| <div align="center">Текст</div> | Выравнивание по центру. |
| <div align="left">Текст</div> | Выравнивание по левому краю. |
| <div align="right">Текст</div> | Выравнивание по правому краю. |
| <div align="justify">Текст</div> | Выравнивание по ширине. |
Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать его лишний раз необходимости нет. Так что align="left" можно опустить.
Отличие между абзацем (тег <p>) и тегом <div> в том, что в начале и конце параграфа появляется вертикальный отступ, чего нет в случае использования тега <div>.
Атрибут align достаточно универсален и может применяться не только к основному тексту, но и к заголовкам вроде <h1>. В примере 1 показано, как в подобном случае устанавливать выравнивание.
Пример 1. Выравнивание текста
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Выравнивание текста</title> </head> <body> <h1 align="center">Как поймать льва?</h1> <p align="right"><strong>Метод перебора</strong></p> <p>Делим пустыню на ряд элементарных участков, размер которых совпадает с габаритными размерами льва, но при этом меньше размера клетки. Далее простым перебором определяем участок, в котором находится лев, что автоматически приводит к его поимке.</p> <p align="right"><strong>Метод дихотомии</strong></p> <p>Делим пустыню на две половины. В одной части - лев, в другой его нет. Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем до тех пор, пока лев не окажется пойман.</p> </body> </html>
Результат примера показан на рис. 1.
Рис. 1. Выравнивание текста по правому и левому краю
В данном примере выравнивание заголовка происходит по центру окна браузера, выделенного абзаца по правому краю, а основного текста — по левому краю.
htmlbook.ru
Начинаем с HTML
Для нашего примера мы создадим абзац текста и добавим в начале изображение (перед текстом, но после открывающегося тега <p>). Вот как выглядит HTML-разметка:
По умолчанию веб-страница будет отображаться с изображением над текстом. Это связано с тем, что в HTML изображения являются блочными элементами. Это значит, что браузер отображает разрывы строки до и после изображения. Мы изменим это поведение по умолчанию с помощью CSS. Но сначала добавим к нашему элементу изображения значение класса:
Стили CSS
Включив в HTML-код атрибут класса «left», можно перейти к vertical align central float left. Мы добавим в таблицу стилей правило, которое задаст смещение изображения. А также несколько дополнительных правил, которые обеспечат, чтобы текст не прилегал к изображению вплотную, обтекая его.
Вот CSS-код:
Этот код смещает изображение влево и добавляет небольшие отступы справа и снизу от изображения.
Если просмотреть в браузере страницу, то изображение в ней будет выровнено по левому краю, а текст абзаца будет отображаться справа от него с соответствующим отступом. Одно замечание относительно значения класса «left«, которое мы использовали. Имейте в виду, что это значение является произвольным. Мы могли бы назвать класс как угодно, а термин «left» сам по себе ничего не делает.
Нам просто нужно задать атрибут класса в HTML, который связан с фактическим стилем CSS float left, а он уже определяет визуальные изменения, которые необходимо произвести.
Альтернативные способы
Подход, при котором мы задаем для изображения атрибут класса, а затем используем общий стиль CSS, который смещает элемент, это только один способ «выравнивания по левому краю». Также можно убрать значение класса и создать эффект, написав более конкретный селектор. Рассмотрим пример, в котором изображение находится внутри раздела со значением класса «main-content«:
Задать стили для изображения можно с помощью следующего кода CSS:
Изображение будет выровнено по левому краю, текст будет обтекать его, как и раньше, но нам не нужно добавлять дополнительное значение класса в разметку. Этот способ выравнивания float left по центру позволит создать меньший HTML-файл, что повысит производительность.
Также можно добавить стили непосредственно в HTML-разметку, например:
Этот метод style float left не является рекомендованным, так как при его использовании стили смешиваются с разметкой, то есть со структурой.
Предпочтительной практикой считается, когда стили и структура страницы разделены. Это особенно полезно, когда нужно быстро изменять макет страницы, подстраиваясь под различные размеры экрана и устройства на адаптивном сайте. Наличие стиля страницы, смешанного с HTML, значительно усложнит создание медиа-запросов, которые могут корректировать внешний вид сайта по мере необходимости.
Перевод статьи «How To Float an Image to the Left of Text on a Webpage» дружной командой проекта Сайтостроение от А до Я.
www.internet-technologies.ru
Как выровнять картинку по правому краю
<div>Длинный абзац с несколькими предложениями. <img alt="Заяц" src="http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg" height="100" width="86"> Он содержит текст, характеризующий помеченное флажком свойство, и изображение, которое нужно прижать к краю правой стороны.</div>
<style> .raz { text-align: right; } </style> <div class="raz"><a href="http://shpargalkablog.ru/2016/02/text-align.html">Свойство <code>text-align</code></a> наследуется, применяется к блочным элементам.
t;img alt="Заяц" src="http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg" height="100" width="86"><br>Выравнивает все содержащиеся в них строчные элементы и текст по горизонтали. Оно не перемещает сам элемент и не передвигает блоки, не работает, если задано строчному элементу. У него есть несколько значений, в том числе <code>right</code>, позволяющих сдвигать содержимое вправо.</div>
<style> .raz img { display: block; /* смещает только блоки */ margin-left: auto; } </style> <div class="raz"><a href="http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html">Свойство <code>margin-left</code></a> не наследуется, применяется ко всем элементам. <img alt="Заяц" src="http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg" height="100" width="86"> У него есть значение <code>auto</code>, которое выравнивает блочный элемент по горизонтали. А именно <code>margin-left: auto;</code> прижимает элемент к правому краю родителя. Это положение может изменяться свойством <code>margin-right</code>. <a href="http://shpargalkablog.ru/2012/03/div-po-centru-html.html">При <code>margin-left: auto;</code> и <code>margin-right: auto;</code> элемент размещается по центру ширины предка.</a></div>
<style> .raz img { float: right; } </style> <div class="raz"><a href="http://shpargalkablog.ru/2011/05/float-left-div-css.html">Свойство <code>float</code></a> не наследуется, применяется ко всем элементам. <img alt="Заяц" src="http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg" height="100" width="86"> Оно вынимает элемент из потока и прижимает к краю левой или правой стороны родителя. Элементы и текст, расположенные в коде после float-элемента, обтекают его с противоположной стороны.</div>
<style> .raz { position: relative; /* смещает относительно родителя с классом raz */ } .raz img { position: absolute; right: 0; } </style> <div class="raz"><a href="http://shpargalkablog.ru/2012/04/pozitsionirovaniye-css.html">Свойство <code>position</code></a> не наследуется, применяется ко всем элементам. <img alt="Заяц" src="http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg" height="100" width="86"> <a href="http://shpargalkablog.ru/2011/04/css-nalozhenie.html"><code>position: absolute;</code></a> вынимает элемент из потока и располагает поверх остального содержимого. Его можно перемещать относительно границ родителя, у которого значение <code>position</code> отлично от <code>static</code>, с помощью свойств <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>. При <code>direction: ltr;</code> свойство <code>left</code> имеет приоритет над свойством <code>right</code>, кроме случаев, когда свойство <code>left</code> имеет значение <code>auto</code>.</div>
<style> .raz { display: table; } .raz div { display: table-cell; vertical-align: top; /* выравнять по верху */ } </style> <div class="raz"> <div><a href="http://shpargalkablog.ru/2012/04/display-block-inline-css.html">Свойство <code>display</code></a> не наследуется, применяется ко всем элементам. Элемент со значением <code>table</code> подобен <a href="http://shpargalkablog.ru/2012/01/html-table.html">тегу <code>table</code></a>, а <code>table-cell</code> — <code>td</code>.</div> <div><img alt="Заяц" src="http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg" height="100" width="86"></div> </div>
Совет: на данном примере занятно поглядеть как ведёт себя картинка, когда уменьшается размер окна браузера.
Как выровнять текст по правому краю
<style> .raz { text-align: right; } </style> <div class="raz">Короткий текст справа<div>
<style> .raz { margin: 0; border-top: solid 2px; padding: 0; overflow: auto; /* очистить float */ } .raz li { clear: both; } .raz span { float: right; white-space: nowrap; /* текст не будет переноситься на другую строку */ } </style> Похожие материалы: <ol class="raz"> <li><a href="//shpargalkablog.ru/2012/03/div-po-centru-html.html">горизонтальное выравнивание html</a> <span>обновлена</span> <li><a href="//shpargalkablog.ru/2012/03/vyrovnyat-tekst-vertikali.html">вертикальное выравнивание html</a> <span>нечего добавить</span> <li><a href="//shpargalkablog.ru/2013/07/justify.html">выравнивание по ширине html</a> <span>хочу обновить</span> </ol>
Как выровнять блок по правому краю
<style> .raz div { max-width: 8em; /* блок занимает ширину родителя, max-width её ограничивает */ min-height: 2em; margin-left: auto; margin-right: 0; border: 1px solid orange; background: #fff5d7; } </style> <div class="raz"> <div>HTML код</div> </div>
<style> .raz { position: relative; padding-right: 8em; /* чтобы элемент не был поверх содержимого родителя */ } .raz div { position: absolute; /* блок занимает ширину содержимого, max-width её ограничивает */ top: 0; /* прикрепить к верху родителя */ right: 0; max-width: 8em; min-height: 2em; border: 1px solid orange; background: #fff5d7; } </style> <div class="raz"> <div>HTML код</div> Текст </div>
<style> .raz div { float: right; /* блок занимает ширину содержимого, max-width её ограничивает */ max-width: 8em; min-height: 2em; border: 1px solid orange; background: #fff5d7; } </style> <div class="raz"> <div>HTML код</div> Текст </div>
<style> .raz { text-align: right; } .raz div { display: inline-block; /* inline-block занимает ширину содержимого, max-width её ограничивает */ max-width: 8em; min-height: 2em; border: 1px solid orange; text-align: start; /* убрать наследование text-align */ background: #fff5d7; } </style> <div class="raz"> <div>HTML код</div> </div>
Как выровнять несколько блоков по правому краю
<style> .raz div { width: 8em; max-width: 100%; min-height: 2em; border: 1px solid orange; background: #fff5d7; } </style> <div class="raz"> <div></div> <div></div> <div></div> </div>
<style> .raz { text-align: right; } .raz div { display: inline-block; /* см. как изменить промежуток между inline-block элементами */ width: 8em; max-width: 100%; min-height: 2em; border: 1px solid orange; vertical-align: middle; /* см. как убрать отступ под inline-block элементами */ text-align: start; background: #fff5d7; } </style> <div class="raz"> <div></div> <div></div> <div></div> </div>
<style> .raz div { width: 8em; max-width: 100%; min-height: 2em; margin: 0 0 0 auto; /* то же, что margin-left: auto; */ border: 1px solid orange; background: #fff5d7; } </style> <div class="raz"> <div></div> <div></div> <div></div> </div>
<style> .raz div { float: right; width: 8em; max-width: 100%; min-height: 2em; border: 1px solid orange; background: #fff5d7; } .raz::after { /* очистить float */ content: ""; display: block; clear: both; } </style> <div class="raz"> <div></div> <div></div> <div></div> </div>
/* смутно понимаю где это можно пригодиться, возможно, чтобы сделать что-то такое */ <style> .raz { position: relative; min-height: 2em; } .raz div { position: absolute; right: 0; width: 8em; max-width: 100%; min-height: 2em; border: 1px solid orange; background: #fff5d7; } .raz div:nth-of-type(2) { right: 8em; } .raz div:nth-of-type(1) { right: 16em; } </style> <div class="raz"> <div></div> <div></div> <div></div> </div>
Два блока: один — слева, другой — справа
/* например, для ссылок «предыдущая» — «следующая» */ <style> .raz { /* очистить float */ display: inline-block; width: 100%; box-sizing: border-box; } .raz div { float: right; width: 10em; max-width: 100%; min-height: 2em; border: 1px solid orange; background: #fff5d7; } .raz div:nth-of-type(odd) { float: left; clear: right; background: yellow; } </style> <div class="raz"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
<style> .raz { -moz-text-align-last: justify; text-align-last: justify; /* выровнять элемент по ширине */ } .raz div { display: inline-block; width: 10em; max-width: 100%; min-height: 2em; border: 1px solid orange; vertical-align: middle; background: #fff5d7; } .raz div:nth-of-type(odd) { background: yellow; } </style> <div class="raz"> <div></div> <div></div> <br> <div></div> <div></div> <br> <div></div> <div></div> </div>
shpargalkablog.ru
smarticle.ru
  Теперь добавляем к нему атрибут align, который отвечает за выравнивание, и так как мы хотим чтоб картинка была слева от текста, то добавляем =»left». Теперь наш код будет выглядеть вот так. ВНИМАНИЕ — Если вы грузите картинки через другие источники, то в конце кода, перед последними кавычками стоит закрывающая дробь (косая палочка) Тогда атрибуты align=»left», и align=»right» СТАВИТЕ ПЕРЕД НЕЙ. Или проще напишу так. В HTML формате в конце кода (перед последними кавычками (и дробью, если она есть)) нужно добавить align=»left» и картинка будет слева от текста или align=»right» и картинка будет справа от текста. (Скопируйте эти символы право-лево и поставьте в конце кода своей картинки) Теперь внимание. Коды картинки всегда должны стоять впереди текста, а текст следом за кодами. Например вы хотите поставить картинку справа от теста. Это должно выглядеть вот так Но это не все: текст может располагаться внизу картинки (это по умолчанию), посередине, и вверху. Ну а теперь напишу по порядку коды, которые надо добавлять в конце HTML -кода картинки, перед последними кавычками, что бы ваши картинки вставали так, как вы этого хотите. |
www.liveinternet.ru
Способ 1 — прямая работа c HTML
На самом деле все достаточно просто. Смотрите пример ниже.
<p align=”center”>Выравнивание абзаца по центру.</p>
Если требуется сдвинуть текстовые фрагменты иным образом, то вместо параметра «center» прописываем следующие значения:
- justify – выравнивание текста по ширине страницы;
- right – по правому краю;
- left — по левому.
По аналогии можно сдвинуть контент, который находится в заголовках (h1, h2), контейнере (div).
Способ 2 и 3 — использование стилей
Конструкцию представленную выше можно слегка трансформировать. Эффект будет таким же. Для этого нужно прописать представленный ниже код.
<p style=”text-align:center;”>Текстовый блок.</p>
В таком виде код прописывается непосредственно в HTML для выравнивания текстового контента по центру.
Есть еще альтернативный вариант добиться результата. Нужно будет проделать пару действий.
Шаг 1. В основном коде написать <p class=”rovno”>Текстовый материал.</p>
Шаг 2. В подключаемом файле CSS вписать следующий код:
.rovno {text-align:center;}
Отмечу, что слово «rovno» это все лишь название класса, который можно назвать и по-другому. Это остается на усмотрение программиста.
По аналогии в HTML можно запросто сделать текст по центру, ширине, а также выровнять по правому или левому краю страницы. Как видите, есть далеко не один вариант достичь цели.
Рекомендации для успешных вебмастеров
Всего несколько вопросов:
- Делаете информационный некомерческий проект?
- Хотите, чтобы сайт хорошо продвигался в поисковых системах?
- Желаете получать доход в сети?
Если все ответы положительные, то просто посмотрите на анонс моего курса о комплексном подходе к развитию сайта. Информация окажется особенно полезной, если он работает на CMS WordPress.
Хотелось бы подметить, что собственные сайты — это лишь один из множества вариантов сформировать пассивный или активный доход на просторах интернета. Мой блог как раз посвящен финансовым возможностям в сети.
Работали когда-нибудь в сфере арбитража трафика, копирайтинга и других направлений деятельности, которые приносят основной или дополнительный доход при удаленном сотрудничестве? Об этом и многом другом вы можете узнать прямо сейчас на страницах моего блога.
Впереди опубликую еще не мало реально полезной информации. Оставайтесь на связи. При желании можете подписаться на обновления Workip на e-mail. Форма подписки расположена ниже.
workip.ru