Css отступ сверху текста: margin-top | htmlbook.ru

Отступы на web-странице. Как сделать отступы в CSS

Приветствую вас на моем блоге. Css (каскадные таблицы стилей) предоставляет много возможностей для настройки внешнего вида веб-страниц. Сегодня я хотел бы коротко показать, как определить в css отступ сверху или с любой другой стороны для любого элемента.

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

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

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

P, div{ Margin-top: 20px; }

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

Отступы можно записать с каждой стороны только с помощью одного свойства margin, которому записывается 4 значения подряд:

Div{ Margin: 20px 10px 20px 10px; }

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

Div{ Margin: 20px 10px; }

Первое значение – это отступ сверху и снизу, а второе – по бокам.

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

Внутренний отступ работает по-другому – он не отодвигает блок от других элементов, а добавляет это расстояние внутри элемента, отодвигая содержимое (контент) блока от его краев. Это удобно. Где вы видели сайт, на котором текст начинается в самом левом верхнем крае окна?

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

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

Для примера можно привести такой кусок кода:

Block{ Width: 200px; Padding: 20px; }

Как вы думаете, какова будет реальная ширина нашего элемента? Тут видно, что она 200 пикселей, но паддинги добавляют по бокам с каждой стороны еще по 20, итого 240 пикселей. Учитывайте это при верстке.

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

К абзацу (тег

) и заголовку (тег

Когда требуется установить абзацный отступ, лучше всего использовать стилевое свойство text-indent . Его значение определяет насколько сдвинуть текст первой строки вправо от исходного положения. Ширина текстового блока при этом не меняется и остается исходно заданной. Величину отступа можно указывать в пикселах, процентах или других доступных единицах (пример 1).

Как изменить отступы на веб-странице?

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

Свое собственное значение отступов можно установить, изменяя значения свойства margin у селектора body .

Как убрать отступы вокруг формы?

При добавлении формы через тег

вокруг нее сверху и снизу автоматически добавляются отступы. Чтобы их убрать, используйте стилевое свойство margin с нулевым значением, добавляя его к селектору FORM .

Как изменить расстояние между абзацами текста?

При использовании тега

Автоматически добавляются отступы сверху и снизу от текстового абзаца. Это сделано для того, чтобы визуально отделить один блок текста от следующего. Понятно, что значения отступов, которые заданы по умолчанию, устраивают не всегда, поэтому иногда их приходится уменьшать или увеличивать. Для этого можно использовать универсальное свойство margin , оно определяет отступы со всех сторон абзаца или margin-top для отступа сверху и margin-bottom — для отступа снизу.

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

Поля и отступы: в чём разница?

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

• поле задаётся свойством padding , отступ — margin ;
• поле определяется промежутком между содержимым и границей блока, отступ — между границами соседних блоков;
• поля могут как учитываться в размерах элемента (ширине и высоте), так и нет.

Свойство margin

Итак, чтобы задать горизонтальный или вертикальный отступ текста CSS, используют конструкцию margin . Данное свойство применяется к тегу задающего абзац документа. В самом простом случае оно записывается как:

margin: 12px.

Такая строчка означает, что вокруг блока текста (или любого другого блока) со всех сторон будет сделан отступ в 12 пикселей. Чтобы увеличить промежуток, например, в три раза, достаточно записать:

margin: 36px.

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

1. margin: 11px 22px.
2. margin: 11px 22px 33px.
3. margin: 11px 22px 33px 44px.

В первом примере от нижней и верхней границ блока будут сделаны отступы по 11 пикселей, по бокам блока — по 22 пикселя. Согласно второй форме записи, между верхним краем блока и контентом будет 11 пикселей, между нижним — 33 пикселя, по бокам — по 22 пикселя. В третьем случае отступ будет иметь значение 11 пикселей сверху, 22 пикселя справа, 33 пикселя снизу и 44 пикселя слева.

Также доступна возможность записи расстояния до границы блока только с одной стороны: margin-top, margin-bottom, margin-left, margin-right . Переведя названия свойств на русский язык, несложно догадаться об их назначении. Например, следующая запись говорит о том, что отступ справа будет равен 22 пикселя:

margin-right: 22рх.

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

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

margin-bottom: 15px , а примыкающий к нему снизу блок margin-top: 35px . Школьная арифметика и здравый смысл подсказывают, что общий отступ между ними будет 50 пикселей. На практике это не так. Блок с большим значением свойства margin «поглотит» своего соседа. В итоге интервал между элементами будет 35 пикселей.

«Красная» строка

Оформляя документ в текстовом редакторе, пользователи предпочитают задавать каждый новый абзац с помощью «красной» строки. С помощью CSS отступ текста слева несложно сделать — используется конструкция text-indent . Записывается она так:

text-indent: 11px.

То есть первая строка абзаца будет сдвинута относительного левого края на 11 пикселей. Чтобы текст на веб-странице больше походил на документ в редакторе, следует дополнительно установить то есть записать:

text-indent: 11px;

text-align: justify.

Помимо пикселей, при описании разметки допускается использование других единиц — дюймов, пунктов, процентов. Пусть блок имеет отступ текста CSS, равный 10%. При ширине блока, равной 500 пикселям, красная строка будет составлять 50 пикселей (10% от 500).

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

text-indent: inherit.

Удивительно, но может принимать и отрицательные значения! В этом случае формируются так называемые выступы, то есть основной текст остаётся на месте, а первая строка смещается влево на 22 пикселя:

text-indent: -22px.

Чтобы буквы не перешли за левую границу браузера, дополнительно к text-indent нужно использовать конструкцию для задания поля:

padding-left: 22px.

Основные свойства CSS для рассмотрены. А закрепить их поможет практика. Вот несколько заключительных советов, как применять изученный материал при разработке веб-сайтов:

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

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

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

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

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

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

Отступы на странице

Селектор BODY , к которому применяется стиль, задает отступы на всей web-странице целиком.

То же можно сделать и применительно к отдельным элементам, например, заголовкам (пример 2).

Пример 2. Изменение отступов у заголовка

Отступы на странице

Одновременно использовать параметры margin и padding в данном случае уже необязательно.

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

Пример 3. Использование атрибута margin

Отступы у параграфа

Основной контент

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

Свойство margin | WebReference

Свойство margin устанавливает пустое пространство от внешнего края border, padding или содержимого блока (рис. 1). Под margin нет своего фона и он принимает фон родительского элемента.

Рис. 1. margin

margin в основном используется для создания вертикальных и горизонтальных отступов между элементами. Аналогично другим блочным свойствам есть свойства для каждой стороны — margin-top, margin-right, margin-bottom и margin-left, соответственно устанавливающие отступ сверху, справа, снизу и слева. В примере 1 пространство между двумя вертикальными блоками задаётся с помощью свойства margin-bottom.

Пример 1. Расстояние между блоков

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>margin</title> <style> .block { background: #B08874; /* Цвет фона */ color: #fff; /* Цвет текста */ padding: 1rem; /* Поля вокруг содержимого */ margin-bottom: 1rem; /* Расстояние снизу */ } </style> </head> <body> <div>Первый блок</div> <div>Второй блок</div> </body> </html>

Результат данного примера показан на рис. 2.

Рис. 2. Расстояние между блоков

Значения margin

В качестве значений margin используются любые допустимые единицы длины, к примеру, пиксели, проценты, em, rem и др. В отличие от padding свойство margin может быть отрицательным (например: -10px), а также принимать значение auto. В остальном margin похоже на padding, у него также может быть от одного до четырёх значений.

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

margin: все стороны;
margin: 10px;

Два значения — первое определяет отступы сверху и снизу для элемента, второе слева и справа для элемента.

margin: верх-низ лево-право;
margin: 10px 20px;

Три значения — первое задаёт отступ сверху для элемента, второе одновременно слева и справа, а третье снизу.

margin: верх лево-право низ;
margin: 10px 20px 5px;

Четыре значения — первое определяет отступ сверху, второе справа, третье снизу, четвёртое слева. Для запоминания последовательности можно представить часы — значения идут по часовой стрелке, начиная с 12 часов.

margin: верх право низ лево;
margin: 5px 10px 15px 20px;

Значение auto

Свойство margin позволяет выравнивать элемент по центру горизонтали, если использовать значение auto и задать ширину элемента через width (пример 1).

Пример 2. Значение auto

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>margin</title> <style> .dialog { width: 80%; /* Ширина блока */ background: #D4E3A5; /* Цвет фона */ border: 2px solid #7D9B3D; /* Параметры рамки */ padding: 1rem; /* Поля */ margin: auto; /* Выравниваем по центру */ } </style> </head> <body> <div> Полинезийцы называют Млечный путь Манго-Роа-И-Ата, что в переводе с маори означает «Длинная акула на рассвете». </div> </body> </html>

Результат данного примера показан на рис. 3.

Рис. 3. Выравнивание блока по центру

Вместо margin: auto можно использовать комбинацию margin-left: auto и margin-right: auto.

Выравнивание блока по центру через значение auto работает только в сочетании с width.

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

Пример 3. Значение auto

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>margin</title> <style> .center { display: block; /* Блочный элемент */ margin: auto; /* Выравниваем по центру */ } </style> </head> <body> <img src=»image/html-128.png» alt=»HTML5″> </body> </html>

Результат данного примера показан на рис. 4.

Рис. 4. Выравнивание картинки по центру

Проценты

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

• По горизонтали проценты считаются от ширины всего блока.
• По вертикали проценты считаются от ширины всего блока.

Таким образом, margin в процентах берётся от ширины всего блока, даже для margin-top и margin-botom.

Отрицательный margin

margin может быть задан с отрицательным значением, тем самым элемент сдвигается в противоположном направлении. К примеру, margin-top:-10px поднимает блок вверх на 10 пикселей, а margin-left:-10px сдвигает блок влево.

В примере 4 показан сдвиг блока с классом stat вверх, если он располагается сразу после элемента <p>.

Пример 4. Использование отрицательного значения

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>margin</title> <style> p + .stat { margin-top: -1rem; /* Поднимаем текст вверх */ } .stat { font-size: 3rem; /* Размер текста */ } </style> </head> <body> <p>Продано ёлок</p> <p>64</p> </body> </html>

Результат данного примера показан на рис. 5. Без отрицательного margin строки располагаются далеко друг от друга.

Рис. 5. Поднимаем блок вверх через margin-top

Обнуление margin

Для некоторых элементов браузер добавляет margin автоматически. Вот несколько примеров:

• для <body> по умолчанию margin задан как 8px;
• для списков <ul>, <ol>, <dl> margin-top и margin-bottom заданы как 1em;
• для <blockquote> и <figure> margin-left и margin-right заданы как 40px.

Эти margin, согласно макету, не всегда нужны, поэтому их можно обнулить, иными словами, задать для margin нулевое значение. В примере 5 показано обнуление margin для элемента <body>, после чего элемент <header> плотно прилегает к краям браузера.

Пример 5. Обнуление margin

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>margin</title> <style> body { margin: 0; /* Обнуляем */ } header { background: #D4E3A5; /* Цвет фона */ padding: 1em; /* Поля вокруг текста */ } </style> </head> <body> <header><h2>Кря-кря</h2></header> </body> </html>

Результат данного примера показан на рис. 6.

Рис. 6. Обнуление margin у <body>

Перейти к заданиям

Автор: Влад Мержевич

Последнее изменение: 17.01.2023

html — свойство CSS для заполнения текста внутри div

Есть ли способ добавить элементу div некоторое дополнение ВНУТРИ его границы? Например, в настоящее время весь текст внутри моего основного элемента div идет прямо к краю границы элемента. Я хотел бы, как правило, на этом сайте, чтобы между текстом и границей было не менее 10-20 пикселей.

Вот снимок экрана, иллюстрирующий, что у меня сейчас есть:

• html
• CSS

1

Искомое свойство CSS — padding. Проблема с отступами заключается в том, что они добавляются к ширине исходного элемента, поэтому, если у вас есть div шириной 300 пикселей и вы добавляете к нему отступы в 10 пикселей, ширина теперь будет 320 пикселей (10 пикселей слева и 10 пикселей слева). право).

Чтобы предотвратить это, вы можете добавить box-sizing: border-box; к div, это заставляет его поддерживать назначенную ширину, даже если вы добавляете отступы. Таким образом, ваш CSS будет выглядеть так:

 раздел {
    box-sizing: граница-коробка;
    отступ: 10 пикселей;
}
 

вы можете узнать больше о размерах блоков и их общей поддержке браузерами здесь:

https://www. paulirish.com/2012/box-sizing-border-box-ftw/

Здесь я вижу много ответов что вы вычитаете из ширины div и/или используете box-sizing, но все, что вам нужно сделать, это применить дополнение к дочерним элементам рассматриваемого div. Так, например, если у вас есть такая разметка:

 

    
Найти агентов

 

Все, что вам нужно сделать, это применить этот CSS:

 #text {
    отступ: 10 пикселей;
}
 

Вот скрипт, показывающий разницу: https://jsfiddle.net/CHCVF/2/

Или, что еще лучше, если у вас есть несколько элементов и вам не хочется присваивать им один и тот же класс, вы можете сделать примерно так:

 .container * {
    отступ: 5px 10px;
}
 

Который выберет все дочерние элементы и назначит им нужные отступы. Вот скрипка в действии: https://jsfiddle.net/CHCVF/3/

4

Просто используйте div { padding: 20px; } и вычтите 40px из исходной ширины div .

Как указал Филип Уиллс, вы также можете использовать box-sizing вместо вычитания 40px :

 div {
    отступ: 20 пикселей;
    -moz-box-sizing: рамка-бокс;
    box-sizing: граница-коробка;
}
 

-moz-box-sizing для Firefox.

3

Padding — это способ добавить отступ внутри Div.
Просто используйте

 div { padding-left: 20px; }
 

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

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — удалить отступы, выровнять текст по верхнему краю div

Задавать вопрос

спросил 8 лет, 7 месяцев назад

Изменено 8 лет, 7 месяцев назад

Просмотрено 647 раз

Сейчас я создаю css для печати! Поскольку мне нужно печатать на шаблоне, я использую миллиметры как единицу измерения!

Моя проблема в том, как вы видите, что красный текст не выровнен по верхней части белого поля, кажется, что белое поле имеет отступ! Я хотел бы, чтобы текст был ровно на 1 мм ниже красной линии. Я попытался задать тексту margin-top:1mm , но текст остался на месте! http://jsfiddle.net/WkhPb Я хотел бы сохранить миллиметры как единицу, что мне нужно изменить? Спасибо

Мой html:

 

 <дел>
  Вставка 1
 

 #коробка{
   высота: 40 мм;
   ширина: 90 мм;
   цвет фона: желтый;
   набивка слева: 6 мм;
   обивка справа: 5 мм;
   обивка сверху: 2 мм;
}
#адрес {
    граница: 1px сплошной красный;
    ширина: 30 мм;
    высота: 20 мм;
    цвет фона: белый;
}
#адрес {
    красный цвет;
    размер шрифта: 2 мм;
    поле слева: 1 мм;
    поле сверху: 0 мм;
    высота линии: 0 мм;
}
 

 #адрес {
    красный цвет;
    размер шрифта: 2 мм;
    положение: абсолютное;
    верх: 1 мм;
    слева: 1 мм;
}