Как посмотреть отступы на сайте в браузере
Горизонтальные и вертикальные отступы от края браузера до содержимого веб-странице встроены в браузер по умолчанию. Тем не менее можно изменять значение этих параметров, делая отступы по желанию больше или меньше. Хитрость заключается в том, что Internet Explorer и Netscape имеют разные параметры для указания значения отступов. У Internet Explorer в теге BODY следует указывать leftmargin для горизонтального отступа и topmargin для вертикального, а в Netscape те же функции выполняют параметры marginwidth и marginheight . Объединяя все параметры воедино, получим универсальный код, который будет работать во всех браузерах одинаково.
Пример 1. Изменение величины отступов
Частенько отступы вообще убирают, делая их равными нулю. Тогда рабочее поле становится больше размером, а используемые рисунки и таблицы, выравненные по краю, располагаются "под обрез". Ниже приведен пример создания таблицы 100% ширины без пустого пространства между краем браузера и таблицы.
2. Отступ первой строки
Использование красной строки с отступом в 2-5 пробела повышает читаемость текста, позволяя легко отыскивать взглядом начало следующего абзаца. В HTML любое количество пробелов заменяется одним, в этом случае стоит использовать другой символ -
Следующий способ также имеет право на существование. Вместо символов пробела надо поставить невидимый рисунок нужной ширины.
В качестве рисунка можно использовать прозрачный GIF размером 1 на 1 пиксел.
И, наконец, всегда можно воспользоваться стилями. Параметр text-indent задает отступ первой строки текста. Отступ можно указывать в пунктах (pt), пикселах (px), дюймах (in), миллиметрах (mm) и др.
Каждый пользователь, имеющий звуковую карту, бесконечно рад при посещении Вашей странички услышать наполненную радостью песенку. И охотно ждет несколько, необходимых для перекачки, минут. Особенно midi-мелодии, известные своей полнозвучностью, будут ласкать уши посетителей. Введите посетителей в экстатическое блаженство!
Конечно, использование стилей более универсально, вдобавок менее обременительно. Однако применение символов является более простым, надежным и независимым от браузера способом. При использовании же в качестве отступа невидимого рисунка есть опасность, что пользователь отключил загрузку изображений, тогда вместо отступа будет показываться некрасивая полоса. В конечном итоге, какой метод предпочесть решать вам.
Начав учиться верстать страницы, мне хотелось стать профессионалом, и тут я прочитала на хабрабаре статью, что профессионал должен уметь верстать попиксельно. Ну что ж, собравшись с силами, я решила сверстать макет пиксель в пиксель.
И тут же столкнулась с проблемой — а какую же высоту отступа указать от блока до текста? Я обратилась с этой проблемой на форум, но услышала ответ:
— Шрифты в фотошопе и браузере сильно отличаются и сделать попиксельную верстку самого текста невозможно.
— Что же делать? Как определить высоту отступа?
— На глазок — все равно результат будет везде разный.
И я засела с работой «на глазок» надолго. Я прикидывала значение отступа, ставила его и щепетильно пыталась подобрать нужную высоту. Но я не понимала, по какому принципу вычислить высоту отступа, пусть даже для одного браузера? Должен же быть какой-то алгоритм или формула? Перелопатив кучу информации, я не нашла решения. Прочитала книжку «Инлайновый контекст форматирования» — результат был тем же. Ответа не было. А я ненавижу работу с такими вот невнятностями и неточностями.
В итоге я сама нашла решение и вывела нужную формулу.
Давайте рассмотрим следующую ситуацию.
Какую же высоту отступа нам сделать между двумя этими надписями? Может 34px, или 30px? Верстаем — не подходит?!
А может быть вычислять нужно вот так?
26 пикселей. При этом, представляете сколько времени уходит на подобные выделения и создание направляющих линий?!
И 26 пикселей тоже неверный ответ!
А теперь, идем к верному ответу сами!
Для начала я решила определить, какую же реальную, а не видимую высоту занимает текст в пикселях.
Небольшой код в хтмл дал мне такую картинку:
Заметьте, границы желтой заливки не совпадают даже с границей заглавных букв. На самом деле шрифт занимает больше места, чем нам могло показаться с первого взгляда. А сколько именно я смогла вычислить лишь опытным путем (данных о параметрах шрифта для windows я не нашла).
Сделав скриншот, загрузив картинку в фотошоп и сильно увеличив, я записала, сколько пикселей занимает расстояние от верхней границы строчных букв до конца желтой заливки сверху (top) и расстояние от нижней границы строчных букв до конца желтой заливки снизу (bottom). Получилась следующая таблица для шрифта Arial:
Теперь мы знаем сколько пикселей занимают параметры шрифта.
Но помимо этого есть еще одно важное понятие — высота линии. Высота линии также участвует в формировании отступов.
В нашем примере верхний шрифт имеет размер 12 пикселей и его высота линии 20 пикселей.
Нижний шрифт 11 пикселей с такой же высотой линии 20 пикселей.
Текст всегда выравнивается посередине высоты линии, значит при учете ее в расчетах мы должны брать половину высоты линии.
Итак, а теперь, я представляю вашему вниманию готовую формулу:
1) Измеряем начальную высоту как расстояние от нижней границы первого строки до верхней границы строчных букв нижней строки. 34px
2) Теперь нам нужно отнять высоту засечек текста, которую мы и вычислили в таблице выше.
34px — 2px(bottom у 12 px) — 3px (top у 11px) = 29px
3) Теперь нам осталось учесть высоту линии.
У первой строки шрифт 12 px, а высота линии 20. Значит у нас есть дополнительные 20-12=8 пикселей. И нам нужно взять всего лишь половину от них — то есть 4 пикселя.
У второй строки шрифт 11 px, а высота линии 20. Значит у нас есть дополнительные 20-11=9 пикселей. Постойте, но ведь половина от 9 — это 4,5 пикселя, а мы не можем указывать дробные значения в коде. Что же делать?
Опытным путем я вычислила: если мы работаем с верхней частью шрифта, как в данном случае, то нужно округлить в большую сторону, то есть взять значение в 5px. А если с нижней — то в нижнюю сторону и взять значение 4px. Итак, у нас это значение 5px.
29px — 4px — 5px = 20px.
УРА! Мы вычислили реальный отступ и он оказался равен не 34, не 30, и даже не 26 пикселей. А… 20 пикселей! Теперь остается лишь указать в вашем css:
Благодаря этому алгоритму и таблице для шрифта Arial, высота текста и отступов до него совпадает пиксель в пиксель, по крайней мере в моей операционной системе и моем браузере. И, для вычисления этого параметра, мне не нужно по 5 минут пытаться подобрать значение на глазок.
И, напоследок, кому интересно:
HTML-свойство margin используется для добавления отступа или разрыва между различными элементами. Свойство padding используется для добавления пространства между содержимым и границей ( рамкой ) указанного HTML-элемента .
Разницу между полем и отступом можно увидеть на следующем рисунке:
Также просмотрите демо-версию, чтобы лучше понять разницу между этими двумя свойствами.
Посмотреть демо-версию и код
У нас есть три элемента div . Первые два - со свойством HTML margin , а третий - со свойством padding . Расстояние между элементами div - это margin , а пространство между текстом внутри третьего элемента div и линией его границы - это padding .
Отступы в CSS - cинтаксис CSS-свойств padding и margin
Синтаксис, который используется для единичного объявления свойства CSS margin :
Этот код задает отступы во всех направлениях: отступ сверху CSS, отступ снизу CSS, отступ слева CSS и отступ справа CSS. Если необходимо задать отступы для разных направлений, это можно сделать с помощью следующего сокращенного объявления:
- 10px - отступ сверху CSS;
- 20px - отступ справа CSS;
- 30px - отступ снизу CSS;
- 40px - отступ слева CSS .
Также можно установить отступ слева CSS и другие направления отдельно:
Примечание: Можно использовать для определения отступа px , pts , cm и т.д.
Синтаксис CSS-свойства padding
Свойство padding можно задать с помощью единичного / сокращенного объявления или используя отдельное объявление, а для каждого направления.
Единичное объявление с одним значением:
Для каждого направления одиночным объявлением:
Если указаны четыре значения, то порядок их следования такой же, как и для свойства HTML CSS margin .
Для каждого направления в отдельности:
Пример для установки полей и отступов в HTML-списке
Во вступительной части я показал свойства margin и padding , используемые в элементе div . В этой демо-версии я создал список с помощью пунктов меню, которые являются ссылками. Список размещается внутри элемента div . Он содержит пункты меню в виде гиперссылок.
Список задается и другими свойствами CSS , но без использования свойств HTML margin и padding он будет выглядеть так:
Посмотреть демо-версию и код
мы получим следующий вид:
Посмотреть онлайн демо-версию и код
Свойство padding добавило пространство между содержимым и границей каждой ссылки. Укажите отступ величиной в 2 пикселя в классе ссылки, и получите следующий вид:
Посмотреть онлайн демо-версию и код
Демонстрация полей на примере HTML-таблицы
Ниже приводится пример использования свойства padding в HTML-таблице . Я создал таблицу с несколькими строками.
Для таблицы заданы стили с помощью различных свойств CSS . Сначала посмотрите, как выглядит таблица без применения свойства padding :
Посмотреть демо-версию и код
Добавив поля, мы получим таблицу, которая будет выглядеть следующим образом:
Посмотреть демо-версию и код
Пример использования полей и отступов с элементом form
Свойства margin padding HTML также можно применять для элементов формы: текстовых полей, кнопок и т.д.
Свойство padding , примененное к текстовому полю, задает пространство между курсором внутри текстового поля и его границей. margin добавляет отступы между различными текстовыми полями или другими элементами формы.
Чтобы стало понятнее, я создам форму и покажу разницу между полями с использованием свойств margin и padding и без. Первоначальный внешний вид формы без применения свойств margin и padding :
Добавив поля к классу текстовых полей и классу кнопки btn , мы получим форму, выглядящую следующим образом:
Поля для текстовых полей:
Поля для кнопки:
Посмотреть демо-версию и код
Чтобы увеличить или уменьшить отступы между текстовыми полями, используйте свойство HTML CSS margin . В данной демо-версии я использовал отрицательное значение для уменьшения расстояния между полями.
Поля формы будут выглядеть следующим образом:
Посмотреть демо-версию и код
После использования отрицательного значения в HTML margin расстояние между текстовыми полями уменьшилось на 3 пикселя.
Использовав свойство padding , мы увеличили расстояние между курсором внутри текстового поля и линией границы, которое задается другими свойствами. Теперь поле выглядит гораздо лучше.
Для кнопки “ Save ” мы также применили свойство padding :
которое используется для выравнивания текста во всех направлениях.
Дайте знать, что вы думаете по данной теме статьи в комментариях. За комментарии, отклики, дизлайки, подписки, лайки огромное вам спасибо!
Есть разные способы установки HTML отступов перед текстом. Но для совместимости с различными браузерами и доступности, мы обсудим самые популярные методы:
Рекомендованный способ в CSS и HTML
Чтобы сделать отступ перед текстом или абзацем, лучше использовать CSS . Ниже приведены примеры того, как смещать надписи с помощью каскадных таблиц стилей. Вставьте каждый из приведенных примеров кода между тегами HTML .
Следующий код создает CSS-класс "tab" , который отодвигает символы и абзац на 40 пикселей от левого края:
Вставив приведенный выше код в раздел , можно выполнить его в любом месте, добавляя его в теги абзаца (
), как показано ниже:
Если вы планируете применять этот стиль на нескольких страницах, лучше создать файл .css и связать его со всеми веб-страницами. Чтобы сделать отступ в HTML , добавьте следующую строчку между тегами и создайте ссылку на файл. Мы назвали его " basic.css ":
Как только файл каскадных таблиц стилей создан, откройте его для редактирования и добавьте тот же код, кроме тега и меток комментирования, как показано ниже:
Когда эти шаги выполнены, можно табулировать любой текст, используя тот же самый
, показанный выше.
Есть и другие варианты. Например, если нужно сместить только первую строку абзаца, то примените приведенный ниже код:
Подсказка: Можно задавать величину отступа в процентах. Например, вместо смещения на 40 пикселей, можно сдвинуть строки на 5% от текущего положения. Можно использовать и длинный пробел при определении нужной ширины.
Бонусная подсказка как сделать отступ в HTML: Чтобы поменять HTML отступ слева на отступ справа, измените свойство margin-left на margin-right .
Рекомендованный метод в HTML
Можно достичь тех же результатов используя стиль, встроенный в HTML- код . Хотя применение CSS делает управление многочисленными веб-страницами легче, если использовать стиль только один раз:
Тут весь текст абзаца смещен на 40 пикселей влево. Другие теги
не смещены.
А здесь только первая строка в абзаце смещается на 40 пикселей слева. Никакие дополнительные строки смещены не будут.
Подсказка : можно задать отступ с помощью процентов. Например, вместо смещения на 40 пикселей, можно заменить значение на 5%, чтобы сдвинуть текст на 5%.
Бонусная подсказка : Можно поменять отступ слева на отступ справа, изменив свойство margin-left на margin-right.
Альтернативный метод
Другой часто применяемый метод, позволяющий создать HTML отступ текста - с помощью , как показано ниже.
Хотя это намного легче, но есть проблемы совместимости, которые могут возникнуть из-за применения этого решения. Данный тег предназначен для цитирования, а не смещения:
Пожалуйста, оставьте ваши мнения по текущей теме материала. Мы очень благодарим вас за ваши комментарии, дизлайки, лайки, отклики, подписки!
Пожалуйста, оставьте ваши комментарии по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, лайки, отклики, подписки, дизлайки!
В случае HTML-документов теги работают больше на разметку контента, чем на указание того, как он должен быть представлен. Больший контроль над представлением достигается с помощью стилей. В этой статье я рассмотрю те стили, которые связаны с тем как форматировать абзац в HTML .
Тег
в HTML позволяет задать абзацы, а атрибут align выравнивает их по левому краю, по правому краю, по центру или по ширине. Помимо них мы будем использовать глобальный атрибут style .
Как выровнять текст в HTML
Можно выровнять абзац, используя атрибут align со следующими значениями:
Скопируйте следующий код в файл .html .
В окне браузера HTML код абзаца выглядит следующим образом.
Как реализовать межстрочный интервал HTML
Вы можете управлять междустрочным интервалом абзаца с помощью style=line-height . Используйте атрибут style со следующими значениями:
Ниже приведен пример HTML-кода , который выводит абзацы с различными междустрочными интервалами:
Ниже приведено несколько различных способов использования значения line-height для атрибута style :
: Устанавливает межстрочный интервал 13 пикселей;
: Устанавливает в HTML расстояние между абзацами в 200% относительно текущего размера шрифта;
: Устанавливает высоту строки 14 пикселей.
Отступы
Я использовал термин '' отступы ", чтобы его было проще понять. Но в HTML мы используем промежутки, чтобы создать вокруг объекта пустое пространство. Можно использовать атрибут style со значением padding , чтобы задать для абзаца отступ слева или справа.
Ниже приводится пример абзацев с отступом слева и справа:
Отступы между абзацами (отступ перед и отступ после абзаца)
В HTML или CSS нам это не нужно. Мы можем просто указать стиль padding для элемента
. padding-top и padding-bottom задают пустое пространство до и после абзаца, которое работает, как отступ сверху или снизу. Посмотрите на приведенный ниже пример тега
. Я установил для первого абзаца HTML отступ 10 пикселей перед вторым и 50 пикселей после второго абзаца:
Читайте также: