Содержание

Как в html сделать отступ текста?

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

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

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

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

Когда вы размещаете текст на сайте он находится в каком-то теге. Это может быть тег блока <div>, тег таблицы <table>, абзаца <p>, секции <section> и так далее.

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

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

<div style=”margin-left:20px;”> Текст блока HTML </div>

<div style=”margin-left:20px;”> Текст блока HTML </div>

Здесь мы воспользовались атрибутом style и в нём указали нужное CSS свойство, задав тексту отступ слева 20px. Так же мы можем задать для нашего блока или другого тега класс и потом в отдельном CSS файле дописать для него стили.

HTML:

<div> Текст блока </div>

<div> Текст блока </div>

CSS:

.text-block { margin-left:20px; }

.text-block {

margin-left:20px;

}

Если вы не создаёте страницу с нуля, а редактируете уже существующую, то можно не задавать новый класс, а определить уже имеющийся класс или идентификатор. Как это сделать показано в этой статье:
«Как определить ID и класс элемента на странице?»

При помощи этого свойства мы можем задать разные отступы тексту в 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 и другие единицы.

Обратите внимание, если вы задаёте верхний или нижний отступ для тега <a>, <span>, <b> — то, скорее всего, он не сработает. Это связано с тем что верхний и нижний margin работает только для блочных элементов HTML, а указанные выше теги являются строчными. Для решения проблемы можно дополнительно задать этому тегу CSS свойство display:inline-block; чтобы к нему применялись свойства одновременно блочного и строчного элемента HTML.

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

Этот способ очень похож на предыдущий, но если margin задавал отступ до текста как бы снаружи тега, то padding будет задавать отступ внутри.

<div style=”paddint-top:20px;”> Текст блока </div>

<div style=”paddint-top:20px;”> Текст блока </div>

Так же можно присвоить класс в HTML коде или воспользоваться уже существующим и дописать это свойство ему:

CSS:

.text-block { padding: 20px 10px 15px 20px; }

.text-block {

padding: 20px 10px 15px 20px;

}

С его помощью так же можно задать разные отступы текста в HTML:

  • padding-left — слева
  • padding-right — справа
  • padding-top — сверху
  • padding-bottom — расстояние снизу
  • padding: 25px; — отступ со всех сторон.

Отступ текста html при помощи неразрывного пробела

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

  • Если вы поставите этот тег в тексте между слов или вначале строки то он создаст отступ равный по ширине 1 пробелу. Поставив несколько   вы можете увеличить расстояние между словами.
  • Если поставить  
    между строк то он создаст вертикальный отступ равный по высоте одной строке. Дописав несколько   (каждый с новой строки) можно увеличить это расстояние.

HTML:

<p>Задаём &nbsp; в HTML</p>

<p>Задаём &nbsp; в  HTML</p>

Отступ текста в HTML при помощи text-indent

Если вам нужно задать отступ в HTML не для всего текста на странице, а лишь только для первой строчки одного или нескольких абзацев, то это можно сделать при помощи свойства text-indent

HTML:

<div> Здесь текст HTML блока</div>

<div> Здесь текст HTML блока</div>

Что делать если отступ не появляются?

Бывают ситуации, когда вы задаёте отступ текста HTML одним из предложенных способов, а он не применяется.

Причин здесь может быть несколько. Наиболее распространённые описаны в этой статье: «Почему не работают CSS-стили?»

Если вы знаете ещё какие то способы как сделать отступ текста HTML напишите их в комментариях. Если статья была для вас полезной — делитесь ей в социальных сетях. Так вы помогаете мне развивать сайт.

Успехов вам в оформлении ваших сайтов и не только!

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

impuls-web.ru

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

18.1K

Есть разные способы установки 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?» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

Как в HTML сделать отступ текста – инструкция к применению

Доброго времени суток! Установка отступов для текста и картинок – основная тема сегодняшней публикации. Рассмотрим подробнее, какие подходы можно применить на практике.

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

Установка отступов за счет вставки пробелов

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

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

Применение тега цитирования

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

Здесь придётся использовать blockquote, позволяющий передвинуть фрагмент слева и справа примерно на 40 px. Достаточно написать код, идентичный с приведённым примером:

Метод позволяет манипулировать фразами в рамках фиксированной величины 40 px. Также стоит отметить, что в данный тег обычно заключают цитату.

Альтернативные варианты

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

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

В первом случае устанавливаются лишь значения отступа от краев картинки. Во втором задается положение изображения по левому краю с обтеканием текста по правому, а в третьем – наоборот.

Информация подошла к завершению. Скажите, вы нашли интересующие сведения? Ответ можно написать в комментариях.

Напоследок упомяну, что блог Workip посвящен преимущественно денежным вариантам заработка в сети. А вы знаете какие именно способы являются действительно перспективными в финансовом плане? Описания некоторых из них уже опубликованы.

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

workip.ru

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

Продолжаем наш практикум по 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

По умолчанию браузеры выравнивают все абзацы по левому краю, ведь читаем мы слева направо. Но, используя, атрибут 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>, которые применяются в особых случаях.

blogwork.ru

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

Блочная верстка частенько используется при создании сайта или блога. Как следствие этого — часто требуется делать отступы у блоков. По этой причине о том, как сделать отступы в CSS подробно описано в данном уроке. Для браузера каждый тег является контейнером, у которого есть содержимое, внутренний отступ, внешние поля, а также рамка. В данном уроке мы научимся делать внутренние и внешние отступы, рассмотрим основные их параметры.

На рисунке ниже наглядно представлены параметры отступов блоков:

Как видно, отступы можно делать в четырех направлениях: верхний отступ (top), нижний отступ (bottom), левый отступ (left) и правый отступ (right). В качестве единиц измерения могут быть пиксели, проценты и другие единицы CSS — подробнее о них здесь. В уроке используются пиксели.

Внутренние отступы блоков

За внутренние отступы в CSS отвечает свойство padding. Итак, давайте рассмотрим пример задания внутренних отступов у блока:

padding-top: 5px; /*верхний внутренний отступ*/
padding-left: 8px; /*левый внутренний отступ*/
padding-right: 8px; /*правый внутренний отступ*/
padding-bottom: 5px; /*нижний внутренний отступ*/

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

margin: 5px 8px 5px 8px; /*верхний, правый, нижний, левый внешние отступы*/
margin: 5px 8px 5px; /*описывает верхний, левый и правый, нижний отступы*/
margin: 5px 8px; /*описывает верхний и нижний, правый и левый отступы*/
margin: 7px; /*описывает все внутренние отступы по 7px*/

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

Внешние отступы блоков

За внешние отступы в CSS отвечает свойство margin. Примеры внешних отступов в CSS:

Пример 1.

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

Пример 2.

padding: 5px 10px 5px 10px; /*верхний, правый, нижний, левый внешние отступы*/
padding: 5px 10px 5px; /*описывает верхний, левый и правый, нижний отступы*/
padding: 5px 10px; /*описывает верхний и нижний, правый и левый отступы*/
padding: 7px; /*описывает все внешние отступы по 7px*/

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

Понравилось? Поделитесь с друзьями!

siteblogger.ru

Как в html сделать отступ текста?

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

Когда вы размещаете текст на сайте он находится в каком-то теге. Это может быть тег блока <div>, тег таблицы <table>, абзаца <p>, секции <section> и так далее.
Мы можем задать отступ для тега в котором находится текст при помощи CSS свойства margin.
Делается это так:

<br
<br<div style=”margin-left:20px;”> Текст блока HTML </div><br

<divstyle=”margin—left:20px;”> Текст блока HTML</div>

Здесь мы воспользовались атрибутом style и в нём указали нужное CSS свойство, задав тексту отступ слева 20px. Так же мы можем задать для нашего блока или другого тега класс и потом в отдельном CSS файле дописать для него стили.
HTML:

<br
<br<div class=»text-block»> Текст блока </div><br

<divclass=«text-block»> Текст блока </div>

CSS:

<br
<br.text-block {<brmargin-left:20px;<br}<br

.text—block{

margin—left:20px;

Если вы не создаёте страницу с нуля, а редактируете уже существующую, то можно не задавать новый класс, а определить уже имеющийся класс или идентификатор. Как это сделать показано в этой статье:
«Как определить ID и класс элемента на странице?»

При помощи этого свойства мы можем задать разные отступы тексту в 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 и другие единицы.

Обратите внимание, если вы задаёте верхний или нижний отступ для тега <a>, <span>, <b> — то, скорее всего, он не сработает. Это связано с тем что верхний и нижний margin работает только для блочных элементов HTML, а указанные выше теги являются строчными. Для решения проблемы можно дополнительно задать этому тегу CSS свойство display:inline-block; чтобы к нему применялись свойства одновременно блочного и строчного элемента HTML.

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

Этот способ очень похож на предыдущий, но если margin задавал отступ до текста как бы снаружи тега, то padding будет задавать отступ внутри.

<br
<br<div style=”paddint-top:20px;”> Текст блока </div><br

<divstyle=”paddint—top:20px;”> Текст блока </div>

Так же можно присвоить класс в HTML коде или воспользоваться уже существующим и дописать это свойство ему:
CSS:

<br
<br.text-block {<brpadding: 20px 10px 15px 20px;<br}<br

.text—block{

padding:20px10px15px20px;

С его помощью так же можно задать разные отступы текста в HTML:

  • padding-left — слева
  • padding-right — справа
  • padding-top — сверху
  • padding-bottom — расстояние снизу
  • padding: 25px; — отступ со всех сторон.

Отступ текста html при помощи неразрывного пробела

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

  • Если вы поставите этот тег в тексте между слов или вначале строки то он создаст отступ равный по ширине 1 пробелу. Поставив несколько   вы можете увеличить расстояние между словами.
  • Если поставить   между строк то он создаст вертикальный отступ равный по высоте одной строке. Дописав несколько   (каждый с новой строки) можно увеличить это расстояние.

HTML:

<br
<br<p>Задаём &nbsp; в HTML</p><br

<p>Задаём &nbsp; в  HTML</p>

Отступ текста в HTML при помощи text-indent

Если вам нужно задать отступ в HTML не для всего текста на странице, а лишь только для первой строчки одного или нескольких абзацев, то это можно сделать при помощи свойства text-indent
HTML:

<br
<br<div style=»text-indent:25px;»> Здесь текст HTML блока</div><br

<divstyle=«text-indent:25px;»> Здесь текст HTML блока</div>

Что делать если отступ не появляются?

Бывают ситуации, когда вы задаёте отступ текста HTML одним из предложенных способов, а он не применяется.
Причин здесь может быть несколько. Наиболее распространённые описаны в этой статье: «Почему не работают CSS-стили?»

www.capitalwm.ru

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

9.1K

Свойство 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» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

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

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