Html отступ сверху

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

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

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

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

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

 

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

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

 

Но у данного способа есть существенный недостаток. Для того, чтобы сделать отступ для текста достаточно большой по длине,  в 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 код, который демонстрирует работу данного способа:

<p><img src=image.png width=150 height=1> HTML отступ текста слева,  используем изображение </p>

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

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

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

Автор: Виктор Милованов

Здравствуйте! Изначально хотел разделить эту статью на 4 маленьких, но потом задумался. Зачем? Ведь удобнее, когда такая информация собрана в рамках одного материала.

Поэтому сегодня мы узнаем, как сделать CSS отступ слева и со всех остальных сторон – справа, сверху и снизу. Их можно делать для картинок и текстов. Они бывают двух видов:

Для первых используется ключевое свойства margin, для вторых – padding. Для наглядности сделал для вас небольшой пример. Чтобы визуально было удобно различать внутреннее и внешнее пространство добавил видимую таблицу. Взглянем, что получилось?

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

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

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

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

Слева (margin-left).

Справа (margin-right).

Сверху (margin-top).

Снизу (margin-bottom).

Сейчас покажу еще классный нюанс.

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

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

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

Смотрим, что из этого вышло.

По аналогии с внутренними отступами в CSS внешние можно прописывать сокращенным кодом или для сторон по отдельности.

Padding-top.

Padding-right.

Padding-bottom.

Padding-left.

Это были основные моменты. Напоследок покажу, как еще можно облегчить некоторую работу.

Отступы на уровне выбранных тегов

В случаях, которые посмотрели выше, они задаются для текста и картинок одновременно.

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

p{

padding-left:150px;

}

Взглянем, что произошло после сохранения изменений.

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

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

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

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

Может пригодиться для формирования красной строки в тексте или проведения других действий.

У меня в социальных сетях есть группы и страницы. Туда я периодически добавляю небольшие анонсы новых публикаций. Вы зарегистрированы в Вконтакте, Одноклассниках, Twitter или Facebook?

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

Оценить статью:

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1

Рейтинг: 5
Голосов: 3

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

Внутренний отступ — пустое пространство между содержимым элемента и его рамкой (если она установлена).

CSS отступ текста и картинок слева, справа, сверху, снизу на простом примере

Для добавления и управления шириной внутренних отступов со всех четырех сторон элемента используется свойство padding.

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

Свойства padding и margin могут принимать от одного до четырех значений:

padding: 10px 15px 22px 18px; margin: 10px 15px 22px 18px;

Где значения устанавливаются по часовой стрелке, начиная с верхнего:


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

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

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Название документа</title> <style> p { border: 3px dashed #ffffff; background-color: #0066FF; color: #ffffff; padding: 15px; /*внутренний отступ для всех сторон*/ margin: 25px; /*внешний отступ для всех сторон*/ } </style> </head> <body> <p>Обычный абзац.</p> </body> </html> Попробовать »

Для отступов, так же как и для рамок, есть свойства позволяющие управлять размером отступа с каждой стороны отдельно. Внутренние отступы регулируются свойствами: padding-top, padding-right, padding-bottom и padding-left. Внешние отступы регулируются свойствами: margin-top, margin-right, margin-bottom и margin-left.

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

Абзацы с отступом

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

Как сделать в css отступ сверху любому элементу?

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

А правила очень просты:

p { margin-bottom: 0 } p + p { text-indent: 1.5em; margin-top: 0 }

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

На этой странице, например, есть элементы P, которые используются в качестве подписи к изображениям (см. пример “Иллюстрации & подписи”). Мы уже выровняли их по центру, поэтому выделять дополнительно отступом не надо. Простое правило » позаботится об этом. Вы можете видеть, что мы действительно использовали это правило в нашем примере.

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

p.stb { text-indent: 0; margin-top: 0.83em } p.mtb { text-indent: 0; margin-top: 2.17em } p.ltb { text-indent: 0; margin-top: 3.08em }

Bert Bos, style activity lead
Copyright © 1994–2018 W3C®

Created 17 January 2001;
Last updated Ср 23 май 2018 14:06:54

margin-top

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

Последнее обновление: 21.04.2016

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

  • padding-top: отступ сверху

  • padding-bottom: отступ снизу

  • padding-left: отступ слева

  • padding-right: отступ справа

Например:

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Блочная модель в CSS3</title> <style> div.outer{ margin: 25px; padding-top:30px; padding-right: 25px; padding-bottom: 35px; padding-left: 28px; border: 2px solid red; } div.inner{ height: 50px; background-color:blue; } </style> </head> <body> <div class=»outer»> <div class=»inner»></div> </div> </body> </html>

Для установки значения отступов, как и в margin, могут применяться либо конкретные значения в пикселях, так и процентные значения (относительно размеров элементов).

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

padding: отступ_сверху отступ_справа отступ_снизу отступ_слева;

Например:

div.outer{ margin: 25px; padding: 30px 25px 35px 28px; border: 2px solid red; }

Если все четыре значения совпадают, то можно писать указать только одно значение для всех отступов:

div.outer{ margin: 25px; padding: 30px; border: 2px solid red; }

НазадСодержаниеВперед

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

Несмотря на загадочность, схлопывание несёт в себе сугубо практическое значение и в первую очередь предназначено для корректного отображения текста. Расстояние между абзацами (тег <p>) без схлопывания увеличится в два раза, тогда как верхний отступ первого абзаца и нижний отступ последнего абзаца останутся неизменными. Схлопывание гарантирует, что расстояние в абзацах везде будет одинаковым.

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

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

Далее перечислим типовые примеры.

Оба отступа положительны

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

Рис. 3.13. Разные отступы у блоков

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

В следующем стиле у тега <h1> нижний отступ задаётся как 20 пикселов, а у <p> верхний отступ как 5 пикселов.

Значения отступов сравниваются между собой, и остаётся наибольшее число, расстояние между заголовком и абзацем текста принимается равным 20 пикселов (рис. 3.14).

Рис. 3.14. Положительные отступы

Один из отступов отрицательный

В этом случае происходит складывание отступов по правилам математики:

x + (-y) = x – y

Здесь x и y величина прилегающих отступов элементов.

В следующем стиле у тега <h1> нижний отступ задаётся как 20 пикселов, а у <p> верхний отступ с отрицательным значением 10 пикселов.

Из значения нижнего отступа тега <h1> отнимается значение верхнего отступа <p>, в итоге расстояние между заголовком и абзацем текста будет равно 10 пикселов (рис. 3.15).

Рис. 3.15. Один отступ отрицательный

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

Оба отступа отрицательны

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

В следующем стиле у тега <h1> нижний отступ задаётся как 1em, а у <p> верхний отступ с отрицательным значением 10 пикселов.

При использовании разных единиц в отступах, браузер приводит их к одним единицам и сравнивает между собой. В данном случае 1em больше, чем 10px, поэтому текстовый абзац сдвинется вверх на 1em (рис. 3.16).

Рис. 3.16. Отрицательные отступы

Вложенные элементы

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

Рис. 3.17. Отступы с учётом дочернего элемента

В следующем стиле у тега <h1> нижний отступ задаётся как 20px,  у <div> верхний отступ как 30px, а у тега <p> вложенного в <div> верхний отступ как 50px.

На элементы воздействует сразу три разных отступа. Чтобы сделать расчет итогового отступа в такой сложной ситуации, можно действовать последовательно. Вначале определяем отступ между <h1> и <div>. Значения оба положительны, поэтому берём большее, т.е. 30px. Далее сравниваем отступ от полученного значения и <p>. Оба значения положительны, при этом верхний отступ у <p> наибольший, он
и будет итоговым отступом между <h1> и <div> (рис. 3.18).

Рис. 3.18. Отступы с учётом вложения тегов

 Схлопывание с вложенными тегами работает и без наличия верхнего элемента. Если оставить только конструкцию <div><p>…</p></div> и для неё задать стиль выше, то <div> сдвинется вниз на 50px, абзац останется неизменным, т.е. вид будет тот же, что представлен на рис. 3.18, только без верхнего заголовка.

Браузер Internet Explorer до версии 7.0 включительно не схлопывает отступы для элементов, у которых установлено свойство hasLayout. В частности, один из способов установить это свойство, это задать ширину для блока (свойство width). Подробнее об этом смотрите главу посвященную IE.

Отмена схлопывания

Схлопывание не всегда требуется при вёрстке страницы, а в некоторых случаях вообще «ломает» дизайн. Поэтому следует знать, в каких случаях схлопывание работает, а в каких нет.

Схлопывание не срабатывает:

  • для элементов, у которых установлено свойство padding.
  • для элементов, у которых на стороне схлопывания задана граница;
  • на элементах с абсолютным позиционированием, т.е. таких, у которых position установлено как absolute;
  • на плавающих элементах (для них свойство float задано как left или right);
  • для строчных элементов;
  • для <html>.

Также схлопывание не срабатывает при соблюдении некоторых условий:

  • для элементов, у которых значение overflow задано как auto, hidden или scroll схлопывание не действует для их дочерних элементов;
  • у элементов, к которым применяется свойство clear, не схлопывается верхний отступ с нижним отступом родительского элемента.

В качестве примера возьмём достаточно распространённый случай, когда нам требуется сделать два слоя, у которых задан только фоновый цвет, но нет полей и границ (пример 3.9).

Пример 3.9. Близлежащие блоки

XHTML 1.0CSS 2.1IECrOpSaFx

Хотя у слоёв не заданы отступы, между ними появится небольшой промежуток (рис. 3.19). Он возникает из-за действия отступа у дочернего элемента <h1>, верхний отступ у которого устанавливается по умолчанию.

Рис. 3.19. Отступ между слоями

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

Главное, чтобы значение было больше нуля, подойдет даже 1px. Также добавление границы ко всем сторонам или только линии для верхнего края отменит схлопывание. Ещё один способ — обнулить верхний отступ у <h1> и заменить его на padding-top при необходимости. Использование свойства overflow со значением auto также даст необходимый эффект. Ниже все эти методы сведены воедино.

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *