Содержание

что такое тег отступа в html?



Я хочу сделать отступ в своем тексте для сайта, который я делаю в html. Я не хочу продолжать печатать &nsbp; четыре раза. Я знаю, что есть способ сделать это, но я не уверен, как. Спасибо!

html css indentation
Поделиться Источник soniaup     12 апреля 2014 в 03:25

3 ответа

  • Как установить формат автоматического отступа HTML на Sublime Text 3?

    У меня есть вопрос, когда я пишу код HTML на Sublime Text 3. Я просто хочу установить формат автоматического отступа HTML. Например, когда я пишу тег p, как в коде, отступ работает именно так. <p> Hello world! </p> Но я хочу писать как под кодом, а не выше. <p> Hello world!…

  • Что такое тег HTML cleaned_tag?

    Я видел этот тег в электронных письмах и на некоторых форумах. Это должно быть нестандартно, потому что я не смог найти никакой информации о значении этого тега. Какова цель cleaned_tag ? Примеры <cleaned_tag http-equiv=Content-Type content=text/html; charset=iso-8859-1> <cleaned_tag…


7

Если вы просто хотите сделать отступ в первой строке, то это

 p { 
   text-indent: 4em; /* or 15px, or 5%, 2rem or 3vw */
 }

Вы можете легко применить это к div или чему угодно еще.

Если вы хотите сделать отступ во всех строках, вам, конечно же, понадобится padding-left: 4em;

Поделиться iamnotsam

    12 апреля 2014 в 03:34


3

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

<blockquote>test</blockquote>

<p>text</p>

<p>Only first line</p>

&nbsp;&nbsp;&nbsp;&nbsp;text

<pre>  text</pre>

<ul><li>text</li>

<table><td></td><td>Ewww</td></table>

<dl><dd>text</dd></dl>

<span></span><span>text</span>

Вы можете увидеть результат по адресу: http://jsfiddle.

net/2My4b/5/

Поделиться Brett     12 апреля 2014 в 03:35


0

text-indent может сделать отступ в первой строке текста, в абзаце или div.

Его можно использовать так:

<element selector> {
  text-indent: <how much>;
}

Если вы хотите сделать отступ во всех строках, используйте padding , например:

<element selector> {
  padding: <how much>;
}

Поделиться Unknown     12 апреля 2014 в 03:56

  • Что такое эквивалентные направляющие отступа атома в скобках?

    Что такое эквивалентные направляющие отступа атома, такие как одна скобка, показывающая вертикальные линии, соединяющие соответствующие начальные/открывающие и конечные/закрывающие скобки или ключевые слова?

  • что такое тег для комментария html?

    что такое тег для вставки комментария в html? <!—comment—> or <!comment!> оба вышеперечисленных тега выполняют задачу комментария(что он не выполняется в выводе), но каков правильный тег для вставки комментария в html?

Похожие вопросы:


Что такое тег <list> ?

Я смотрел на источник страницы Chrome для его красивого управления сохраненными паролями в его настройках. В нем я увидел следующий код: <list id=saved-passwords-list class=settings-list…


html-тег <dd> и обман для отступа whitespace

Я работаю над проектом сохранения, чтобы перенести какой-то старый текст WordStar в HTML. Конвертер полностью завершен, и после многих дискуссий и сессий с куратором я счастлив, что содержание было…


Что такое тег <A W3MIRHREF> в HTML?

в файле .

html я нашел следующий код: <!DOCTYPE HTML PUBLIC html.dtd> <HTML> <P><A W3MIRHREF=http://www.myCompany.org/division/subdivision/repec/handle/wpaper/wp-02-01.rdf…


Как установить формат автоматического отступа HTML на Sublime Text 3?

У меня есть вопрос, когда я пишу код HTML на Sublime Text 3. Я просто хочу установить формат автоматического отступа HTML. Например, когда я пишу тег p, как в коде, отступ работает именно так….


Что такое тег HTML cleaned_tag?

Я видел этот тег в электронных письмах и на некоторых форумах. Это должно быть нестандартно, потому что я не смог найти никакой информации о значении этого тега. Какова цель cleaned_tag ? Примеры…


Что такое эквивалентные направляющие отступа атома в скобках?

Что такое эквивалентные направляющие отступа атома, такие как одна скобка, показывающая вертикальные линии, соединяющие соответствующие начальные/открывающие и конечные/закрывающие скобки или…


что такое тег для комментария html?

что такое тег для вставки комментария в html? <!—comment—> or <!comment!> оба вышеперечисленных тега выполняют задачу комментария(что он не выполняется в выводе), но каков правильный…


Что такое тег <comment> ?

Я нашел тег, который никогда раньше не видел в каком-то коде HTML : что такое тег <comment>Some comment</comment> и чем он отличается от <!— Another comment —> ? EDIT : вот…


JQuery — узнайте, что такое тег HTML $(это)

Как я могу узнать, что $(this) -это li ? Есть ли какая-нибудь функция jQuery, которая позволит нам узнать, что это за тег HTML? <ul> <li class=data>Hello</li> <li…


Как показать JSON как код в html и что такое CSS?

Я хочу отобразить шаблон ответа и запроса API в справочном руководстве API. В шаблоне я хочу показать JSON в теге code и правильно стилизовать Я пробовал и использовал теги ‘pre’ и заключил их.

..

html — Отличия от тегов

<br> и <p> делают совершенно не одно и то же.

<p> используется для обозначения параграфа (абзаца) текста, в то время как <br> — для создания отступа между строками/переноса текста на другую строку.

Вообще, в современных реалиях использовать br вообще не рекомендуется (кроме тех случаев, когда вам необходимо разделить текст). Все отступы делаются при помощи стилей. По крайней мере, должны.

Судя по всему, автор вопроса спрашивает про различие пустого <p></p>

и <br.

Здесь дело в том, что по умолчанию браузер добавляет тегу p 2 отступа: один размером 1em снизу и один такой же сверху. Если текста внутри тега нет, то остается только один отступ, равный 1em (то есть как раз высоте одной строки текста грубо говоря).

Но br не создает отступа. Он переносит строку.

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

Ключевое же отличие у них в семантике: тег p используется для обозначение одного абзаца текста (а отступы — побочный эффект стандартной стилизации, от которого можно избавиться в одну строку CSS кода), а тег

br используется именно для переноса строки.

Так что использовать <p></p> для создания отступа не стоит. Если вам нужно отделить одну часть текста от другой, воспользуйтесь br. А если вам нужно отделить друг от друга какой-то визуальный контент, используйте CSS отступы (различные).

<p>
Здесь идет текст. Тег p используется для того, чтобы обозначить абзац текста. <br>
Но здесь текст написан в том же абзаце, но уже на новой строке.
Конечно, можно поставить несколько тегов br:<br><br><br>
Ставлено 3 тега br: первый перешел на новую строку, второй и третий сделали то же самое, в результате чего было пропущено 2 строки.
<p></p>
А выше вставлен пустой тег p, который визуально сделал то же самое, что и один br, но семантически совершенно неверно. Дальше будет вставлен еще один тег p, но отступы у него будут убраны стилями, в результате чего отступа вы не увидите:
<p></p>
Текст после тега p с убранными отступами.
</p>

html как сделать отступы от краев страницы

На чтение 5 мин. Просмотров 35 Опубликовано

15.12.2019

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

Отступы задаются параметрами margin и padding . Наличия двух атрибутов вместо одного требуют интересы разных браузеров, margin — Internet Эксплорер, а padding — Опера и Файер фох. Совмещение разных параметров гарантирует, что показываться web-страница в разных браузерах будет одинаково.

Управлять отдельными отступами от разных краев экрана можно с помощью параметров margin-top , margin-bottom , margin-right и margin-left , которые соответственно изменяют расстояние от верхнего, нижнего, правого и левого края окна браузера. Прежде чем их использовать, следует задать нулевое значение параметрам margin и padding (пример 1).

Пример 1. Изменение верхнего отступа от края браузера

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

Рекомендованный способ в CSS и HTML

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

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

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

), как показано ниже:

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

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

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

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

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

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

Рекомендованный метод в HTML

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

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

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

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

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

Альтернативный метод

Другой часто применяемый метод HTML отступа текста — с помощью

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

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

Здравствуйте, дорогие друзья!

Рассмотрим несколько способов как сделать отступ текста в HTML.

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

Отступ текста в HTML при помощи margin

Когда вы размещаете текст на сайте он находится в каком-то теге. Это может быть тег блока

, секции и так далее.

Мы можем задать отступ для тега в котором находится текст при помощи CSS свойства margin.

Делается это так:

Здесь мы воспользовались атрибутом style и в нём указали нужное CSS свойство, задав тексту отступ слева 20px. Так же мы можем задать для нашего блока или другого тега класс и потом в отдельном 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 тег отступ слева

Свойство padding определяет величину отступа между границами элемента и его содержимым.

auto — определяется браузером.

num — число с единицами измерения.

— от каждой стороны по 20px.

Существует возможность задавать отступ от какой-то одной стороны:
padding-top, padding-right, padding-bottom, padding-left.

существует краткая запись задания разных отступов от каждой стороны: padding(отступ сверху, отступ справа, отступ снизу, отступ слева)..

Порядок строго как указан!

Свойство margin определяет величину отступа между границами элемента и соседними элементами.

auto — определяется браузером.

num — число с единицами измерения.

— от каждой стороны по 20px.

Существует возможность задавать отступ от какой-то одной стороны:
margin-top, margin-right, margin-bottom, margin-left.

существует краткая запись задания разных отступов от каждой стороны: margin(отступ сверху, отступ справа, отступ снизу, отступ слева).

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

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

Итак, html отступ текста , способ первый — самый, естественный и простой. Чтобы сделать отступ перед текстом, добавим перед текстом html код пробела — Добавить html код пробела можно в любом html редакторе.

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

В данном примере, перед выбранным нами текстом код пробела — & nbsp ; добавлен четыре раза, в результате, получим нужный нам отступ.

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

Этот способ хорош тем, что он будет гарантированно отработан любым браузером.

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

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

HTML отступ текста , способ второй — этот способ основан на свойствах тега blockquote. Данный тег задает отступ примерно 40 пикселей слева и справа, для размещенного в нем текста. Кроме того, отступ задается сверху и снизу. Пример html кода использования данного способа приведен ниже:

Как видите, данный способ задания отступа для текста, очень прост в использовании, но и этот способ тоже имеет существенный недостаток. Отступ, который задает тег blockquote, является фиксированным и всегда равен одной и той же величине – 40px.

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

HTML отступ текста , способ третий.

Здесь мы воспользуемся свойством параметра text-indent каскадных таблиц стилей CSS.

Если открыть справочник CSS, на странице с описанием свойств text-indent, то мы увидим, что с помощью text-indent, мы можем задавать величину отступа первой строки или первого абзаца, какого-либо блока текста.

Мы рассматриваем, пример с коротки текстовым блоком, поэтому свойства text-indent вполне подходят для нашего случая.

Ниже приведен html код, который формирует отступ текста с использованием text-indent. Из примера видно, что задавая для text-indent разные значения аргументов, мы можем изменять величину отступа текста:

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

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

В качестве рабочего примера, сразу рассмотрим html код, который демонстрирует работу данного способа:

HTML отступ текста слева, используем изображение

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

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

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

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

Рекомендованный способ в CSS и HTML

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

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

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

), как показано ниже:

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

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

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

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

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

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

Рекомендованный метод в HTML

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

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

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

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

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

Альтернативный метод

Другой часто применяемый метод HTML отступа текста — с помощью

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

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

Html отступы текста от края – Тарифы на сотовую связь