text-indent
Свойство text-indent определяет размер отступа (пустого места) перед строкой в текстовом блоке. По умолчанию это свойство управляет отступом только первой строкой блока, однако ключевые слова hanging и each-line могут изменить данное поведение.
Строка смещается по горизонтали к левому или к правому (при размещении текста справа налево) краю блока, в котором содержится элемент.
| Начальное значение | 0 |
|---|---|
| Применяется к | блочные контейнеры |
| Наследуется | да |
| Проценты | ссылается на ширину содержащего блока |
| Обработка значения | процент, как указан или абсолютная длина, а также любые ключевые слова |
| Animation type | длина, проценты или calc(); |
Синтаксис
/* значение */ text-indent: 3mm; text-indent: 40px; /* значение зависит от ширины блока*/ text-indent: 15%; /* значения ключевых слов */ text-indent: 5em each-line; text-indent: 5em hanging; text-indent: 5em hanging each-line; /* международные значения */ text-indent: inherit; text-indent: initial; text-indent: unset;
Значения
each-line Экспериментальная возможность (экспериментальное значение)
Отступ добавляется к первой строке блочного контейнера, а также к каждой строке после принудительного разрыва строки (Enter и br), но не влияет на строки после мягкого переноса.
hanging Экспериментальная возможность (экспериментальное значение)
Отступ добавляется ко всем строкам, кроме первой.
Формальный синтаксис
text-indent =
[ (en-US) ] (en-US) && (en-US)
hanging? (en-US) && (en-US)
each-line? (en-US)
=
| (en-US)
Простые примеры отступов
HTML
p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. p> p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. p>
CSS
p text-indent: 5em; background: powderblue; >
Как внути input сделать отступ для текста?
Как сделать отступ для текста 2 см сверху, с добавлением номер страницы ворд 2010
Нужна нумерация страниц в документе, при этом отступ от края листа до текста со всех сторон должен.
Как сделать отступ текста от картинки?
Доброго времени суток! имеется два блока, которые находятся рядом т.е. float: left в первом блоке.
Используя тег , нужно сделать, чтоб вводимый текст имел отступ слева
Используя тег <input>, нужно сделать, чтоб вводимый текст имел отступ слева, а не ставился прям.
Как сделать отступ для маркированного списка?
Хоть у меня и стоит ВордПресс, то все равно решил сюда написать. В общем такая проблема, что.
1025 / 678 / 295
Регистрация: 04.04.2013
Сообщений: 2,707
Сообщение было отмечено MrRuslanBB как решение
Решение
.news input[type="text"]{padding: 5px;}
Регистрация: 11.02.2017
Сообщений: 2
Это будет и внутри и снаружи. а как сделать только внутри?
Регистрация: 10.05.2017
Сообщений: 108
padding-left: 50px;
и padding всегда отступ внутри
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Как сделать отступ для развернутых окон (как в случае с taskbar)?
Как сделать отступ для развернутых окон (Как в случае с taskbar)? Пример.
Как между полем для ввода и словом сделать отступ?
Как между полем для ввода и словом сделать отступ? Проблема в том, что мне не нравиться что слова.
Вывод текста, не получается сделать отступ на строчку (MFC)
MFC Вывод текст, не получается сделать отступ на строчку, то есть текст идет в одну строчку и.
Как убрать отступ в теге form между границей формы и полем input
Возникла проблема на простом по идее месте. Создал форму для оставления месседжа и контактов. .
Отступы
По умолчанию все отступы добавляются к ширине контента. Каждый вид отступа имеет свои особенности, хотя визуально они похожи. Чтобы запомнить порядок отступов, можно подумать о такой аналогии: представьте печатный текст на бумаге — это наш контент. Теперь добавим к тексту поля по краям, ведь когда текст прижат к краю, это не очень красиво. Такие поля будут padding’ом. Поставим этот лист бумаги с текстом в рамку — это будет border. И теперь мы можем решать на каком расстоянии будет рамка от остальных объектов — это будет margin.
Padding – «внутренний» отступ(выводится внутри границы). На padding распространяется цвет фона контента. Ширина padding’a добавляется к ширине и высоте контента.
Заметим, что цвет паддинга как и в случае с листом бумаги передается ему от контента.
У нас есть 4ре направления, по которым мы должны задать padding. И у нас есть множество способов как это сделать.
Вариант, когда мы задаем все 4ре направления по отдельности. Чтобы запомнить порядок задания достаточно знать, что направления идут по часовой стрелке, от «12ти» часов.
padding: 25px 50px 75px 100px; верхний padding равен 25px
padding справа равен 50px
bottom снизу равен 75px
padding слева равен 100px
Вариант с тремя направлениями легче всего запомнить представив ромб. Первое значение задает верх, второе отступы по бокам и последнее идет вниз.
padding: 25px 50px 75px; верхний padding равен 25px
padding’и справа и слева равны 50px
нижний padding равен 75px
вариант с двумя значениями используется довольно часто — мы задаем первым значением отступы сверху и снизу и вторым отступы справа и слева.
padding: 25px 50px; верхний и нижний padding’и равны 25px
правые и левые paddings равны 50px
Ну и когда нам нужно сделать одинаковый со всех сторон отступ, делаем просто одно значение.
padding: 25px; Отступы со всех сторон равны 25px
Можно задавать padding отдельно по направлениям
padding-top:10px; padding-right:20px; padding-bottom:30px; padding-left:40px; padding-bottom — устанавливает padding снизу
padding-left — устанавливает padding слева
padding-right — устанавливает padding справа
padding-top — устанавливает padding сверху
Margin
margin – внешний отступ(делает отступ снаружи границы).
У margin’a нет цвета, margin всегда прозрачен.
Правила использования margin’a, аналогичны padding’у – просто слово padding меняется на margin
margin:0; для body
margin:0px; для body убирает белые отступы по краям документа
body < margin:0; > margin:0 auto
margin:0 auto; – выравнивает блок по центру, по ширине. Пример ниже выравнивает красный div с классом block по центру экрана.
div.block < width:300px; height:200px; background-color:red; margin:0 auto; > Границы
border — это граница блока. В отличии от margin и padding мы можем задать цвет для border’a. Также как в случае с margin и padding ширина border’a добавляется к ширине блока.
Мы можем написать все свойства границы сразу, задав ширину, стиль (solid — это непрерывная граница), цвет.
border: 3px solid black; А можем задавать их по отдельности:
border-width:3px; // ширина border-style:solid; // стиль border-color:red; // цвет Мы можем задавать границу отдельно по направлениям
border-top:1px dotted red; //сверху граница красными точками border-bottom-style: dashed; Можно задавать border-width по всем направлениям
border-width: 2px 10px 4px 20px; Если нам нужна граница со всех сторон, кроме заданной то мы можем поступить следующим образом.
.semi_block < border:10px solid orange; border-bottom:0px solid orange; > То есть мы окружаем блок границей со всех сторон, а потом убираем ее снизу, выставляя границу толщиной 0
outline – граница, которая возникает вокруг объекта, при его выборе курсором. Синтаксис outline аналогичен border’у. Например:
outline:1px dotted grey; Для чего же кроме border нам может понадобиться еще и outline!? Во-первых, мы можем отключить выделение у объекта, которое в отличии от границы не скругляется. Во-вторых outline — очень удобная вещь при отладки верстки, так как outline не сдвигает верстку, а накладывается на нее.
Полезное чтиво
- Расстановка полей и отступов в CSShttps://habrahabr.ru/company/netcracker/blog/281008/
- Использование теории близости для расстановки отступовhttps://spark.ru/startup/logo/blog/28397/teoriya-blizosti-glavnoe-pravilo-dizajna-kotoroe-rasstavlyaet-vse-po-mestam?from=vc
- Модификация отступов у формыhttps://hsto.org/files/b94/832/419/b94832419cf54ae7be1193ff2fedd934.gif
- Проблемы со схлопывающимися margin’ами https://cmichel.io/css-margin-top-not-working
Практика:
-
Сделать один блок под другим. Между ними сделать расстояние высотой в один блок. Оба блока должны быть выровнены по центру по горизонтали
Шпаргалка: как сделать отступ текста CSS
Веб-ресурс оценивается пользователями по его внешней привлекательности. Поэтому даже информационно полезный текст может быть не прочитан из-за того, что он некачественно оформлен. Вывод – нужно тщательно и внимательно подходить не только к смысловому содержанию страниц сайта, но и к его визуальному представлению. Появление технологии CSS расширило возможности создания привлекательных статей. Одно из свойств, предназначенных для облегчения восприятия написанного – отступ текста CSS.
Поля и отступы: в чём разница?
Прежде чем начинать форматировать текст, следует разобраться, что такое поля и отступы. Несмотря на то что эти элементы разметки в ряде случаев выглядят для пользователя одинаково, между ними существуют принципиальные различия:
- поле задаётся свойством padding, отступ – margin;
- поле определяется промежутком между содержимым и границей блока, отступ – между границами соседних блоков;
- поля могут как учитываться в размерах элемента (ширине и высоте), так и нет.
Свойство margin
Итак, чтобы задать горизонтальный или вертикальный отступ текста CSS, используют конструкцию margin. Данное свойство применяется к тегу задающего абзац документа. В самом простом случае оно записывается как:
Такая строчка означает, что вокруг блока текста (или любого другого блока) со всех сторон будет сделан отступ в 12 пикселей. Чтобы увеличить промежуток, например, в три раза, достаточно записать:
Но что делать, если интервал между блоками должен быть разный с каждой стороны? Разработчики веб-страниц используют несколько форм записи:
- margin: 11px 22px.
- margin: 11px 22px 33px.
- margin: 11px 22px 33px 44px.
В первом примере от нижней и верхней границ блока будут сделаны отступы по 11 пикселей, по бокам блока – по 22 пикселя. Согласно второй форме записи, между верхним краем блока и контентом будет 11 пикселей, между нижним – 33 пикселя, по бокам – по 22 пикселя. В третьем случае отступ текста CSS будет иметь значение 11 пикселей сверху, 22 пикселя справа, 33 пикселя снизу и 44 пикселя слева.
Также доступна возможность записи расстояния до границы блока только с одной стороны: margin-top, margin-bottom, margin-left, margin-right. Переведя названия свойств на русский язык, несложно догадаться об их назначении. Например, следующая запись говорит о том, что отступ справа будет равен 22 пикселя:
Для остальных сторон расстояния вокруг блока принимаются равными значению элемента-родителя.
Свойство margin имеет особенность, которую должен помнить разработчик, когда использует отступ текста CSS по вертикали. Интервалы соседних элементов не суммируются, а налагаются друг на друга. Например, пусть один из блоков имеет margin-bottom: 15px, а примыкающий к нему снизу блок margin-top: 35px. Школьная арифметика и здравый смысл подсказывают, что общий отступ между ними будет 50 пикселей. На практике это не так. Блок с большим значением свойства margin «поглотит» своего соседа. В итоге интервал между элементами будет 35 пикселей.
«Красная» строка
Оформляя документ в текстовом редакторе, пользователи предпочитают задавать каждый новый абзац с помощью «красной» строки. С помощью CSS отступ текста слева несложно сделать – используется конструкция text-indent. Записывается она так:
То есть первая строка абзаца будет сдвинута относительного левого края на 11 пикселей. Чтобы текст на веб-странице больше походил на документ в редакторе, следует дополнительно установить выравнивание по ширине, то есть записать:
Помимо пикселей, при описании разметки допускается использование других единиц – дюймов, пунктов, процентов. Пусть блок имеет отступ текста CSS, равный 10%. При ширине блока, равной 500 пикселям, красная строка будет составлять 50 пикселей (10% от 500).
Для данного свойства может быть выставлено значение inherit. Такая запись говорит, что блок использует аналогичное свойство родительского блока.
Удивительно, но абзацный отступ может принимать и отрицательные значения! В этом случае формируются так называемые выступы, то есть основной текст остаётся на месте, а первая строка смещается влево на 22 пикселя:
Чтобы буквы не перешли за левую границу браузера, дополнительно к text-indent нужно использовать конструкцию для задания поля:
Полезные рекомендации
Основные свойства CSS для форматирования текста рассмотрены. А закрепить их поможет практика. Вот несколько заключительных советов, как применять изученный материал при разработке веб-сайтов:
- красная строка и отступ текста – разные понятия, и для их указания используются разные свойства;
- для вертикальных отступов правила математики не действуют – интервалы накладываются, «побеждает» элемент с большим значением;
- отрицательный абзацный отступ используют, чтобы указать первую строку абзаца с помощью изображения.