Как в html сделать отступ вниз – Как сделать отступы html 🚩 как сделать вертикальную линию в html 🚩 Веб-дизайн

Как сделать отступы или табуляцию в HTML?

Есть разные способы установки HTML отступов перед текстом. Но для совместимости с различными браузерами и доступности, мы обсудим самые популярные методы:

Чтобы сделать отступ перед текстом или абзацем, лучше использовать CSS. Ниже приведены примеры того, как смещать надписи с помощью каскадных таблиц стилей. Вставьте каждый из приведенных примеров кода между тегами HTML <head></head>.

Следующий код создает CSS-класс «tab», который отодвигает символы и абзац на 40 пикселей от левого края:

<style type="text/css">
<!--
.tab { margin-left: 40px; }
-->
</style>

Вставив приведенный выше код в раздел <head>, можно выполнить его в любом месте, добавляя его в теги абзаца (<p>), как показано ниже:

<p>Образец табуляции</p>

Если вы планируете применять этот стиль на нескольких страницах, лучше создать файл .css и связать его со всеми веб-страницами. Чтобы сделать отступ в HTML, добавьте следующую строчку между тегами <head> и создайте ссылку на файл. Мы назвали его «basic.css«:

<link rel="stylesheet" Type="text/css" href="http://www.example.com/basic.css">

Как только файл каскадных таблиц стилей создан, откройте его для редактирования и добавьте тот же код, кроме тега <style> и меток комментирования, как показано ниже:

.tab { margin-left: 40px; }

Когда эти шаги выполнены, можно табулировать любой текст, используя тот же самый <p>, показанный выше.

Есть и другие варианты. Например, если нужно сместить только первую строку абзаца, то примените приведенный ниже код:

.tab { text-indent:40px }

Подсказка: Можно задавать величину отступа в процентах. Например, вместо смещения на 40 пикселей, можно сдвинуть строки на 5% от текущего положения. Можно использовать и длинный пробел при определении нужной ширины.

Бонусная подсказка как сделать отступ в HTML: Чтобы поменять отступ слева на отступ справа, измените свойство margin-left на margin-right.

Можно достичь тех же результатов используя стиль, встроенный в HTML- код. Хотя применение CSS делает управление многочисленными веб-страницами легче, если использовать стиль только один раз:

<p>Это текст с отступом.</p>

Тут весь текст абзаца смещен на 40 пикселей влево. Другие теги <p> не смещены.

<p>Это текст с отступом.</p>

А здесь только первая строка в абзаце смещается на 40 пикселей слева. Никакие дополнительные строки смещены не будут.

Подсказка: можно задать отступ с помощью процентов. Например, вместо смещения на 40 пикселей, можно заменить значение на 5%, чтобы сдвинуть текст на 5%.

Бонусная подсказка: Можно поменять отступ слева на отступ справа, изменив свойство margin-left на margin-right.

Другой часто применяемый метод HTML отступа текста — с помощью <blockquote>, как показано ниже.

Хотя это намного легче, но есть проблемы совместимости, которые могут возникнуть из-за применения этого решения. Данный тег предназначен для цитирования, а не смещения:

<blockquote>Эта строка будет сдвинута.</blockquote>

Данная публикация представляет собой перевод статьи «How do I indent or tab text on my web page or in HTML?» , подготовленной дружной командой проекта Интернет-технологии.ру

Как сделать внутренний и внешний отступ у элементов в HTML-разметке на CSS?

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

В качестве рассматриваемого элемента, у которого необходимо сделать отступ, может быть текст, изображение, таблица или любой другой HTML-элемент. Главное – это следовать некоторым важным правилам, о которых я сейчас расскажу.

Если вы еще только создаете свой сайт, то я рекомендую вам в верх вашего главного файла стилей вставить следующие свойства:

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

Зачем это нужно, спросите вы? Отвечаю на ваш вопрос наглядным примером.

Допустим, у вас есть такой элемент верстки:

<div>
	Hello, world!
</div>

Так будет выглядеть вариант без использования описанных выше свойств (верхний элемент) и с их использованием (нижний элемент):

Как сделать внутренний и внешний отступ у элементов в HTML-разметке на CSS?

Что здесь видно? Что ширина элемента в первом варианте (без использования свойств) стала больше указанной за счет добавленных отступов, что является не совсем удобным и правильным в плане верстки.

Вариант со свойствами куда более эстетичнее, но использовать его стоить осознанно, ведь при добавлении их в уже готовый сайт вы рискуете получить поехавший дизайн и «головную боль» в виде приведения всего этого в должный вид. Все проекты, которые мне довелось вести с нуля, не обошлись без этих свойств.

А теперь, собственно, поговорим о вариантах организации отступов у элементов на вашем сайте с наглядными примерами.

Внутренний отступ с помощью CSS-свойства «padding»

Чтобы вы понимали всю логику вещей, возьмем для примера следующий фрагмент верстки:

<div>
	Hello, world!
</div>

<div>
	Hello, world!
</div>

со своими стилями:

.test_div {
	width: 250px;
	border: 1px solid;
}

Визуальный вариант получается таким:

Как сделать внутренний и внешний отступ у элементов в HTML-разметке на CSS?

Что из себя представляет свойство «padding»? Оно помогает организовать внутренний отступ в указанных элементах. Добавим к нашей верстке внутренний отступ, равный 10px:

.test_div {
	width: 250px;
	border: 1px solid;
	padding: 10px; // Внутренний отступ 10px
}

Визуально это получается так:

Как сделать внутренний и внешний отступ у элементов в HTML-разметке на CSS?

Число 10 в свойстве говорит о том, что внутри указанных элементов с каждой из их четырех сторон необходимо добавить отступ, равный 10px. Пиксели (px) могут быть заменены на проценты или другую поддерживаемую в CSS величину.

Всего существует два варианта указания сторон, с которых необходимо сделать отступы.

Первый – это с явным указанием сторон:

padding-top: 10px; // Внутренний отступ 10px сверху
padding-right: 10px; // Внутренний отступ 10px справа
padding-bottom: 10px; // Внутренний отступ 10px снизу
padding-left: 10px; // Внутренний отступ 10px слева

В таком случае для каждой стороны используется свое свойство. И второй:

padding: 10px 0 0 0; // Внутренний отступ 10px сверху, все остальное - 0px
padding: 10px 0; // Внутренний отступ 10px сверху и снизу, а по бокам - 0px
padding: 0 10px; // Внутренний отступ 0px сверху и сниз, а по бокам - 10px

Здесь идет простое перечисление значений, каждое из которых соответствует своей стороне. Стороны задаются так: первое значение – верх, второе – право, третье – низ и четвертое – лево, то есть все по часовой стрелке.

Если значения два[/b] (верх и право), то это значит, что зеркально эти же значения уходят вниз и влево и только так. Вроде бы все понятно. Если для какой-то из сторон вам не нужно задавать отступ – значение для этой стороны выставляете «0». Этот вариант мне нравится больше, так как он более компактный, но в своих начинаниях я использовал именно первый вариант.

Этот тип отступов хорошо подходит для разделения текста, содержания ячеек таблиц и прочей текстовой информации. Для разделения же самих элементов, подобных тем, что в примере выше, существует другое свойство.

Внешний отступ с помощью CSS-свойства «margin»

Отличительная особенность свойства «margin» – это то, что отступ добавляется вне элемента, то есть внешний.

Вариантов добавления здесь также два.

Первый – с явным указанием стороны:

margin-top: 10px; // Внешний отступ 10px сверху
margin-right: 10px; // Внешний отступ 10px справа
margin-bottom: 10px; // Внешний отступ 10px снизу
margin-left: 10px; // Внешний отступ 10px слева

Второй – с перечислением значений, каждое из которых соответствует своей стороне:

margin: 10px 0 0 0; // Внешний отступ 10px сверху, все остальное - 0px
margin: 10px 0; // Внешний отступ 10px сверху и снизу, а по бокам - 0px
margin: 0 10px; // Внешний отступ 0px сверху и сниз, а по бокам - 10px

Здесь описывать все нюансы работы с правилами я не буду, все так же, как и о свойстве «padding», о нем написано выше.

Используем margin со следующим значением:

.test_div {
	width: 250px;
	border: 1px solid;
	margin: 10px; // Внешний отступ 10px
}

Визуально это будет выглядеть так:

Как сделать внутренний и внешний отступ у элементов в HTML-разметке на CSS?

Как видно из примера, в таком случае добавляется внешний отступ, разделяющий между собой указанные элементы.

Важная особенность: если вы внимательно смотрели на результат, то могли заметить, что соседние отступы у элементов не суммируются. То есть если первый элемент имеет внешний нижний отступ, равный 10px, а второй – внешний верхний отступ с этим же значением, то общее расстояние между ними будет равно также 10px. Если 10 и 15 соответственно, то общее – 15 и так далее.

Этот вариант отступов часто используется в тексте, а именно в оформлении параграфов, а также в элементах, которые имеют видимые границы.

Но оба свойства не ограничиваются лишь этими элементами. Варианты их использования вы выбираете сами, я лишь постарался преподнести вам основу о них.

Поля и отступы CSS - пояснение на примере четырех HTML-элементов

Свойство HTML margin используется для добавления отступа или разрыва между различными элементами. Свойство padding используется для добавления пространства между содержимым и границей (рамкой) указанного HTML-элемента.

Разницу между полем и отступом можно увидеть на следующем рисунке:


Также просмотрите демо-версию, чтобы лучше понять разницу между этими двумя свойствами.

Посмотреть демо-версию и код

У нас есть три элемента div. Первые два — со свойством HTML margin, а третий — со свойством padding. Расстояние между элементами div — это margin, а пространство между текстом внутри третьего элемента div и линией его границы — это padding.

Синтаксис, который используется для единичного объявления свойства CSS margin:

Этот код задает отступы во всех направлениях: сверху, снизу, слева и справа. Если необходимо задать отступы для разных направлений, это можно сделать с помощью следующего сокращенного объявления:

margin: 10px 20px 50px 100px;

Где:

  • 10px — отступ сверху;
  • 20px — отступ справа;
  • 30px — отступ снизу;
  • 40px — отступ слева.

Также можно установить margin left HTML и другие направления отдельно:

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

Примечание: Можно использовать для определения отступа px, pts, cm и т.д.

Свойство padding можно задать с помощью единичного / сокращенного объявления или используя отдельное объявление, а для каждого направления.

Единичное объявление с одним значением:

Для каждого направления одиночным объявлением:

padding: 10px 20px 50px 100px;

Если указаны четыре значения, то порядок их следования такой же, как и для свойства HTML CSS margin.

Для каждого направления в отдельности:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

Во вступительной части я показал свойства margin и padding, используемые в элементе div. В этой демо-версии я создал список с помощью пунктов меню, которые являются ссылками. Список размещается внутри элемента div. Он содержит пункты меню в виде гиперссылок.

Список задается и другими свойствами CSS, но без использования свойств HTML margin и padding он будет выглядеть так:


Посмотреть демо-версию и код

Добавив поля 10px для ссылок внутри <ul>:

мы получим следующий вид:


Посмотреть онлайн демо-версию и код

Свойство padding добавило пространство между содержимым и границей каждой ссылки. Укажите отступ величиной в 2 пикселя в классе ссылки, и получите следующий вид:


Посмотреть онлайн демо-версию и код

Весь класс для ссылок внутри элемента <ul> будет следующим:

padding: 10px;
margin: 2px;
text-decoration: none;
color: #fff;
background-color: #DA8119;
display:block;

Ниже приводится пример использования свойства padding в HTML-таблице. Я создал таблицу с несколькими строками.

Для таблицы заданы стили с помощью различных свойств CSS. Сначала посмотрите, как выглядит таблица без применения свойства padding:


Посмотреть демо-версию и код

Добавив поля, мы получим таблицу, которая будет выглядеть следующим образом:


Посмотреть демо-версию и код

Ниже приводится код стилей, которые используются для <td>. Весь код можно увидеть, перейдя по ссылке выше:

padding: 20px;
border: dashed 1px #DF7000;
background: #D0E8AC;
color: #000;

Свойства margin padding HTML также можно применять для элементов формы: текстовых полей, кнопок и т.д.

Свойство padding, примененное к текстовому полю, задает пространство между курсором внутри текстового поля и его границей. margin добавляет отступы между различными текстовыми полями или другими элементами формы.

Чтобы стало понятнее, я создам форму и покажу разницу между полями с использованием свойств margin и padding и без. Первоначальный внешний вид формы без применения свойств margin и padding:


Добавив поля к классу текстовых полей и классу кнопки btn, мы получим форму, выглядящую следующим образом:

Поля для текстовых полей:

Поля для кнопки:


Посмотреть демо-версию и код

Чтобы увеличить или уменьшить отступы между текстовыми полями, используйте свойство HTML CSS margin. В данной демо-версии я использовал отрицательное значение для уменьшения расстояния между полями.

Поля формы будут выглядеть следующим образом:


Посмотреть демо-версию и код

После использования отрицательного значения в HTML margin расстояние между текстовыми полями уменьшилось на 3 пикселя.

Использовав свойство padding, мы увеличили расстояние между курсором внутри текстового поля и линией границы, которое задается другими свойствами. Теперь поле выглядит гораздо лучше.

Для кнопки “Save” мы также применили свойство padding:

которое используется для выравнивания текста во всех направлениях.

Данная публикация представляет собой перевод статьи «CSS padding and margin – Explained with 4 HTML elements» , подготовленной дружной командой проекта Интернет-технологии.ру

Как сделать отступ сверху CSS?

Приветствую вас, дорогие посетители, на сайте Impuls-Web!

Достаточно часто при верстке страниц мы сталкиваемся с тем, что нам нужно выровнять по горизонтали, относительно друг друга, какие-то блоки или их содержимое, или задать расстояние между блоками, расположенными горизонтально.

В этих случаях нам необходимо задать отступ сверху CSS-стилями для достижения нужного нам результата. В свою очередь, в зависимости от ситуации мы можем использовать внутренний или внешний отступ сверху CSS.

Навигация по статье:

Внешний отступ сверху CSS

Для задания внешнего верхнего отступа используется CSS-свойство margin-top, значение которого можно задать в px (пикселях), em, % и других доступных в CSS единицах измерения.

В одной из мох прошлых статей я уже рассказывала, как можно использовать свойство margin. С этой статьей вы можете ознакомиться, перейдя по этой ссылке.

Пример использования:

.margin-block{ margin-top:50px; }

.margin-block{

margin-top:50px;

}

Верхний отступ CSS

Аналогично, для выравнивания блока вы можете использовать свойства margin-left, margin-right, margin-bottom. Так же можно указать свойство margin, и задать для него четыре параметра, по часовой стрелке начиная с верхней стороны, соответственно для каждой из сторон:

margin: 20px 50px 30px 50px;

margin: 20px 50px 30px 50px;

margin: сверху справа снизу слева

Внешние отступы CSS

Внутренний отступ сверху CSS

В ситуации, когда нам нужно выровнять контент по вертикали, относительно родительского блока мы можем использовать свойство padding-top, которое задает внутренний отступ сверху CSS. Параметры свойства задаются аналогично свойству margin в px, em, % и т.д.

Пример:

.padding-block{ padding-top: 50px; }

.padding-block{

padding-top: 50px;

}

Внетренний отступ сверху CSS

Аналогично свойству margin, свойство padding можно использовать для задания отступов с других сторон блока по отдельности: padding-left, padding-right, padding-bottom. А так же можно задавать расстояния для всех сторон одновременно:

padding: 20px 50px 30px 50px;

padding: 20px 50px 30px 50px;

Внутренние отступы CSS

В этом случае значения задаются аналогично как и для margin начиная сверху, а дальше по часовой стрелке (справа, снизу, слева)

Используя, в зависимости от ситуации, показанные в статье способы задания отступов сверху CSS-свойствами margin и padding, вы сможете расположить необходимые вам блоки на странице своего сайта именно так как вам нужно.

Надеюсь, данная статья будет для вас полезна! Не забывайте оставлять комментарии и делиться статьей в соцсетях.
А на сегодня у меня все! Успехов вам и до встречи в следующих статьях!

С уважением Юлия Гусарь

Табуляция в HTML: 4 способа сделать отступ

По умолчанию браузеры игнорируют последовательности из нескольких пробелов, учитывая только первый. Однако, в некоторых случаях есть необходимость сделать отступ в HTML документе.

Отдельного символа табуляции в HTML не существует, тем не менее, даже без специального кода или знака табуляции, есть много способов достичь нужного результата.

Основные способы сделать табуляцию

Способы сделать табуляцию в HTML:

  • Используя CSS свойство margin-left.
  • С помощью спецсимвола неразрывный пробел &nbsp;.
  • Несколькими пробелами внутри тега <pre>.
  • Задать блоку CSS свойство white-space и использовать пробелы.

Примеры. Табуляция в HTML

Способ 1: Делаем отступ, например, 50 пикселей от левого края с помощью свойства CSS margin-left.

<p>Текст после табуляции.</p>

Способ 2: Используем специальный символ HTML &nbsp; - неразрывный пробел. Каждый nbsp; равен одному пробелу и не будет игнорироваться браузером. Однако неразрывные пробелы не переносятся на следующую строку. Это следует учитывать, если табуляция делается как отступ внутри текста.

<p>&nbsp;&nbsp;&nbsp;&nbsp;Текст после отступа.</p>

Способ 3: Пишем текст внутри тега <pre>. По умолчанию, браузеры не игнорируют пробелы внутри этого тега. Подробнее в статье: Тег <pre> HTML предварительно отформатированный текст.

<pre>    Текст после табуляции.</pre>

Способ 4: Меняем у блока правило учета пробелов через CSS свойство white-space.

<p>    Текст после отступа.</p>

Каждый из этих способов будет работать. Какой больше подойдет в конкретном случае - решать вам. Мне в своей практике доводилось использовать все 4 способа табуляции, приведенные выше. Чаще всего использую CSS отступы и неразрывные пробелы.

Отступы в css

внешний и внутренний отступы в cssДля более красивого отображения элементов на web-странице применяют внешний и внутренний отступы в css и на примерах мы это сейчас разберём.

Каждый элемент, будь это параграф, div, картинка или видео, - это некий блок, в котором можно сделать отступы как внутри с помощью свойства padding, так и снаружи с помощью margin.

В css прописываются эти свойства для отступов таким образом ( для примера взят параграф ):

<style>
p {
    margin: 20px 10px 30px 10px;
    padding: 10px 10px 14px 10px;
}
</style>
Вместо тега P вы пропишите свой элемент разумеется, для которого будут применены отступы.

Обязательно нужно уяснить и запомнить, что для параметров margin и padding построение отступов для каждой стороны идёт одинаковое.
То есть, у нас по 4 значения в каждом отступе:

Значения отступов.

  • Первое значение: отступ сверху;
  • Второе значение: отступ справа;
  • Третье значение: отступ снизу;
  • Четвёртое значение: отступ слева.
отступы margin и paddingВ данном примере я сделал margin внешний отступ в css таким образом: сверху я прописал 20px, слева и справа по 10px ( как правило они для симметрии прописываются одинаковые ), и снизу указал 30px.

А для padding внутреннего отступа я указал: по 10px сверху, слева и справа, и 14px снизу.

Значение для отступов в свойствах margin и padding можно сокращать, при условии если они имеют одинаковую величину.
Из моего примера сокращённая запись будет иметь такой уже вид:

<style>
p {
    margin: 20px 10px 30px 10px;
    padding: 10px 10px 14px 10px;
}
</style>
То есть, когда отсутствует последняя числовая запись, в данном случае для отступа слева, то браузер автоматически подставляет для отступа слева такое же значение как и у значения справа.
И в моём случае отступы справа и слева будут по 10px что в margin, что в padding.

А если у вас одинаковые величины для внешних отступов сверху и снизу ( к примеру: 16px ), и так же одинаковые величины для внешних отступов слева и справа ( к примеру: 20px ), то запись будет иметь ещё более сокращённый вид:

<style>
p {
    margin: 16px 20px;
}
</style>

Соответственно для внутреннего отступа css запись делается идентично этой.

Применение одинарных отступов: для каждой стороны отдельно.

Для указания отдельного отступа применяются следующие свойства с одним значением:

Свойства отступа для каждой стороны.

  • margin-top: 3px; внешний верхний отступ;
  • margin-left: 4px; внешний левый отступ;
  • margin-right: 6px; внешний правый отступ;
  • margin-bottom: 10px; внешний нижний отступ.
Точно так же прописываются записи и для внутренних отступов, только нужно заменить margin на padding.

К примеру у вас для всех картинок img уже прописаны в css все отступы.

<style>
img {
    margin: 10px 20px 14px;
    padding: 6px;
}
</style>
То есть ( для уяснения ) внешний отступ имеет такие значения: сверху 10px, слева и справа: по 20px, и снизу 14px.
А внутренний отступ равен по 6px со всех 4-ёх сторон.

Допустим, вы решили поставить ещё картинку на страницу, но для неё вы хотите изменить только внешний отступ сверху, а остальные оставить как есть. И для выполнения этой задачи достаточно прописать class для этой картинки, и добавить в css дополнительную запись.

<style>
img.verx {
    margin-top: 40px;
}

<img src="картинка.jpg" alt="" />
</style>
В итоге, добавленная вами картинка с классом verx примет все отступы прописанные в css для тега img, и изменит только внешний отступ для верхней стороны ( в нашем случае: 40px ).

Я постарался сделать описание для отступов css более детально, но если возникнут вопросы задавайте их через комментарии.

Дата публикации: 25.08.2018

Похожие статьи

Добавить комментарий

отступ и расстояние между абзацами

Абзац в html

Продолжаем наш практикум по HTML (что это такое?) — в сегодняшней инструкции вы узнаете, как разделить сплошной и цельный текст в HTML при помощи абзацев. Также я расскажу, как правильно делать и вставлять теги абзаца, изменять отступ и расстояние между параграфами.

Абзацы в HTML

Применение абзацев необходимо для того, чтобы выдерживать без изменения уникальную структуру текста, создаваемую автором. Так, на части делятся книги и журналы, газеты и разделы в колонках. Структурирование текстов по фрагментов в HTML делается при помощи абзацев — чтобы была понятная логическая структура, удобная для восприятия, да еще и отображалась во всех браузерах корректно.

Блоки текста в HTML разделяются между собой при помощи тегов абзаца <p></p>. По вертикали между абзацами появляется небольшой отступ или отбивка.

Как разделить текст абзацами? Пример:

<p>Первый абзац, помещенный в теги p</p>
<p>Второй абзац, помещенный в теги p</p>

Результат

Первый абзац, помещенный в теги p

Второй абзац, помещенный в теги p

То есть абзац начинается с тега <p> и заканчивается закрывающим его тегом </p>. При этом между различными смысловыми блоками в цельном тексте создаются паузы (до абзаца и после него появляются пустые строки, отступы), повышая читабельность текста, улучшая компоновку и внешний вид длинных и сложных текстов.

Если между вашими абзацами получаются слишком большие отступы (пустые строки), не вздумайте использовать тег <br> для их уменьшения, лучше обратите внимание на файл style.css, в котором прописаны параметры отступов между абзацами. Тег <br> используется для переноса строки — это совсем другое и не следует использовать его для создания абзацев. Что такое перенос строки и зачем он нужен, читайте тут.

Что вы найдете в файле style.css? Вы найдете параметры отступов, стили margin и padding (надеюсь вы знаете о разнице между этими свойствами) применяемые к абзацу и задающие для него отступы, в том числе сверху и снизу. Найдя эти стили, вы сможете их изменить, увеличив или уменьшив отступы между абзацами.

Атрибуты тега абзаца в HTML

тег абзаца в HTML

По умолчанию браузеры выравнивают все абзацы по левому краю, ведь читаем мы слева направо. Но, используя, атрибут align, можно выровнять абзац по правому краю, по центру или по ширине. Пример:

<p align="left">Выравниваем абзац по левому краю.</p>
<p align="right">Выравниваем абзац по правому краю.</p>
<p align="center">Выравниваем абзац по центру.</p>
<p>Выравниваем абзац по ширине.</p>

Результат:

Выравниваем абзац по левому краю.

Выравниваем абзац по правому краю.

Выравниваем абзац по центру.

Выравниваем абзац по ширине.

Бонус — красная строка и отступы в абзаце

Для удобства восприятия письменного текста в школе нас заставляли делать на первой строке абзаца «красную строку» — небольшой отступ слева от линии основного текста.

В оформлении веб-страниц это встречается не так часто, но все же встречается и для того чтобы закрыть эту потребность вам нужно знать лишь одно свойство text-indent: 10%; которое я применю к следующему абзацу при помощи этого кода:

<p></p>

Обратите внимание, что я делаю это для примера и поэтому применил свойство в HTML, а не в файле CSS (что такое CSS и зачем он нужен?). Если вы хотите отредактировать подобным образом все абзацы на вашем сайте, добавив красную строку, нужно внести изменения в файл style.css.

Либо добавьте в HTML-код страницы код (можно задавать размер отступа в px, либо в %):

<style>p {text-indent: 10%; /* Задаем красную строку — отступ в абзаце */}</style>

Ну вот и все что нужно вам знать по этой теме. А в следующих статьях я расскажу вам о тегах <NOBR> и <BR>, которые применяются в особых случаях.

Отправить ответ

avatar
  Подписаться  
Уведомление о