Какое свойство определяет отступ от левого края параграфа

10.06.2020
0
Главная › Какие свойства › Какое свойство определяет отступ от левого края параграфа
Какое свойство определяет отступ от левого края параграфа thumbnail

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

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

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

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

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

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

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

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

HTML:

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

CSS:

.text-block {

margin-left:20px;

}

html отступ текста

Если вы не создаёте страницу с нуля, а редактируете уже существующую, то можно не задавать новый класс, а определить уже имеющийся класс или идентификатор. Как это сделать показано в этой статье:
«Как определить 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>

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

CSS:

.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>

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

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

HTML:

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

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

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

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

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

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

Источник

Анонимный вопрос  ·  19 июля 2018

80,6 K

Внутренние отступы задаются с помощью padding, внешние с помощью margin.

padding: 1px — со всех сторон внутренний отступ 1 пиксель

padding: 1px 2px — по вертикали 1 пиксель а по горизонтали 2 пикселя

padding: 1px 2px 3px — сверху 1 пиксель по бокам 2 пикселя снизу 3 пикселя

padding: 1px 2px 3px 4px — сверху 1, справа 2, снизу 3, слева 4

с margin такая же ситуация

Магистр Йода медицинской физики. 17 лет люблю горы ???? и собак ????

Для внутренних отступов есть свойства padding, для внешних margin.
Можно задать с какой-либо одной стороны padding-left, padding-right, padding-top, padding-bottom, для margin аналогично.
Например:
/* внешний отступ слева 15px */
margin-left: 15px;
/* внутренний отступ снизу 45px */
padding-bottom: 45px;
Можно использовать сокращенные записи, например:
/* внутренний… Читать далее

Читайте также:  Какие свойства чичикова проявились в его внутреннем монологе

это же CSS ,а не HTML. А в вопросе четко сказано ,как это делать в HTML

-Для создания отступа можно воспользоваться включением в HTML кода CSS.в тег абзаца <p> включите параметр text-indent:
<p style = “text-indent: 15px;”>Текст абзаца</p>
Этот код создает абзац с отступом в 15 пикселей слева
-Отрегулировать отступы можно при помощи создания таблиц и применения параметров cellpadding и cellspacing.
-Задать необходимый промежуток между… Читать далее

А можно параметр text-indent использовать не в <p>?

В стили класса или тэга задаешь padding-left: 10px. Он увеличивает ширину блока. Если не хочешь менять ширину задай margin-left: 10px.

Тегу body задай box-sizing: border-box, тогда padding будет работать как margin

Как отложить загрузку CSS?

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

$(«head»).append(«<link rel=’stylesheet’ type=’text/css’ href=’/styles.css’ />»);

​
Если этот код необходимо выполнить после загрузки документа и jQuery соответственно, например в методе ready, то пишем следующее:
​

$(document).ready(function() {
$(«head»).append(«<link rel=’stylesheet’ type=’text/css’ href=’/styles.css’ />»);
})

​

Прочитать ещё 2 ответа

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

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

Прочитать ещё 3 ответа

Как запомнить HTML-теги?

Прожила год в Токио, училась в языковой школе. Влюблена в японскую классику…

Сначала лучше запомнить основные теги, а потом уже те, с помощью которых можно форматировать текст. Чем больше будет практики, тем легче будет запомнить все теги. Удачи 🙂

Прочитать ещё 1 ответ

Как разделить мобильную и десктопную верстку сайта?

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

  1. // проверяем существование переменных $width и $height
  2. if (isset($_GET[‘width’]) AND isset($_GET[‘height’])) {
  3. // если переменные существуют, то выводим полученные значения на экран
  4. echo ‘Ширина экрана: ‘ . $_GET[‘width’] . «<br />n»;
  5. echo ‘Высота экрана: ‘ . $_GET[‘height’] . «<br />n»;
  6. }
  8. // если переменные не существуют, то выполняем следующее
  9. else {
  10. // PHP сгенерирует код JavaScript, который обработает браузер
  11. // пользователя и передаст значения обратно PHP-скрипту через протокол HTTP
  12. echo «<script language=’javascript’>n»;
  13. echo » location.href=»${_SERVER[‘SCRIPT_NAME’]}?${_SERVER[‘QUERY_STRING’]}»
  14. . «width=» + screen.width + «&height=» + screen.height;n»;
  15. echo «</script>n»;
  16. }
  18. ?>

В зависимости от значения переменных $_GET[‘width’] и $_GET[‘height’] подключайте что вам нужно.

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

Партнёрские программы, инструменты для вебмастера, рейтинг хостингов  ·  siterost.net

Вы можете изменить расстояние между абзацами при помощи CSS-свойства margin, либо более специфичных margin-top (отступ сверху) и margin-bottom (отступ снизу).

Вот пример кода:

p {

margin-top: 10px;

}

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

p:first-child {

margin-top: 0;

}

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

Прочитать ещё 1 ответ

Источник

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

В качестве рассматриваемого элемента, у которого необходимо сделать отступ, может быть текст, изображение, таблица или любой другой 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 style=»width: 250px;border: 1px solid;padding: 20px;»>
Hello, world!
</div>

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

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

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

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

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

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

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

<div class=»test_div»>
Hello, world!
</div>

<div class=»test_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 и так далее.

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

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

Источник

В этой статье я хотел бы рассказать, как правильно расставлять поля (padding) и отступы (margin) в CSS.

Прежде всего давайте вспомним определение полей и отступов согласно спецификации W3C. В боксовой модели (box model) поля — это расстояние между контентом (content) и границей блока (border). А отступы это расстояние между границей блока и границей соседнего или родительского элемента.

Таким образом, если граница и фон элемента не заданы, то нет разницы, использовать свойство padding или margin для задания отступов, но при условии, что ширина (width) и высота (height) элемента не заданы и не изменен алгоритм расчета размеров контента с помощью свойства box-sizing.

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

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

Это блок новостей news. Он состоит из заголовка, списка новостей и ссылки «Другие новости». Дадим им следующие названия классов: news__title, news__list и news__more-link.

<div class=»news»>
<h2 class=»news__title»>Новости</h2>
<ul class=»news__list»>
<li class=»news__list-item»>…</li>
<li class=»news__list-item»>…</li>
<li class=»news__list-item»>…</li>
</ul>
<p class=»news__more-link»><a href=»…»>Другие новости</a></p>
</div>

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

.news {
padding: 20px 25px;
}

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

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

Теперь нужно задать вертикальные отступы между элементами. Для этого следует определить какой из элементов является обязательным. Очевидно что блок новостей не может существовать без списка новостей, в то же время ссылки «Другие новости» может и не быть, заголовок тоже может быть убран, например, при изменении дизайна.

Учитывая это, задаем для заголовка отступ снизу, а для ссылки «Другие новости» отступ сверху.

.news__title {
margin-bottom: 10px;
}

.news__more-link {
margin-top: 12px;
}

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

.news__list {
margin: 10px 0 12px 0;
}

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

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

Можно задать для каждой новости кроме первой отступ сверху, либо для каждой новости кроме последней отступ снизу. Первый вариант более предпочтителен, поскольку псевдоселектор :first-child был добавлен в спецификации CSS 2.1 и имеет более широкую поддержку, в отличие от псевдоселектора :last-child, который был добавлен только в спецификации CSS версии 3.0.

.news__list-item {
margin-top: 18px;
}

.news__list-item:first-child {
margin-top: 0;
}

Таким образом, правильная расстановка полей и отступов позволяет гибко менять внешний вид любого блока без внесения изменений в стили и без нарушений в дизайне. Самое главное — определить, какие элементы блока являются основными (обязательными), а какие опциональными.

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

В этом случае можно использовать следующий способ задания отступов.

.popup__header + .popup__text {
margin-top: 15px;
}

jsfiddle.net/onfv42mz/1

Тогда отступ появится, только если будут использоваться оба элемента. В случае же вывода только заголовка или только текста, лишнего отступа не будет.

Схлопывание вертикальных отступов

Еще один нюанс, о котором не все знают, связан с вертикальными отступами между соседними блоками. В определении отступов, которое я приводил выше, сказано, что отступ — это расстояние между границами текущего и соседнего блока. Таким образом, если мы расположим два блока друг под другом и зададим одному из них отступ снизу в 30px, а другому отступ сверху в 20px, отступ между ними будет не 50px, а 30px.

.block1 {
margin-bottom: 30px;
}

.block2 {
margin-top: 20px;
}

jsfiddle.net/j99btnc8

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

Прошу заметить, что горизонтальные отступы, в отличие от вертикальных, не «схлопываются», а суммируются. Поля (padding) также суммируются.

Зная о «схлопывании» отступов, мы можем использовать эту особенность в свою пользу. Например, если нам необходимо расставить отступы для заголовков и текста внутри статьи, то для заголовка первого уровня зададим отступ снизу в 20px, а для заголовка второго уровня отступ сверху 20px и снизу 10px, а для всех параграфов зададим отступ сверху 10px.

h1 {
margin-bottom: 24px;
}

h2 {
margin-top: 24px;
margin-bottom: 12px;
}

p {
margin-top: 12px;
}

jsfiddle.net/n27fms7s/1

Теперь заголовок h2 можно расположить как после заголовка h1, так и после параграфа. В любом случае отступ сверху не будет превышать 24px.

Общие правила

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

  1. Если соседние элементы имеют одинаковые отступы, то лучше задавать их родительскому контейнеру, а не элементам.
  2. При задании отступов между элементами, следует учитывать, обязательный это элемент или опциональный.
  3. Для списка однотипных элементов — не забывать о том, что число элементов может варьироваться.
  4. Помнить о наложении вертикальных отступов и использовать эту особенность там, где она принесет пользу.

Источник

Читайте также:  Какое целебное свойство имеет шиповник
Предыдущая статья
Какие продукты питания от изжоги
Следующая статья
Альфа глобулин в каких продуктах содержится
© Какой продукт?