Как убрать отступы браузера
Обновлено: 04.07.2024
Горизонтальные и вертикальные отступы от края браузера до содержимого web-страницы встроены в браузер по умолчанию. Тем не менее, можно изменить значение этих параметров, делая отступы по желанию больше или меньше. Так, например, можно установить отступ от верхнего края окна до заголовка страницы, или вообще убрать его.
Отступы задаются параметрами margin и padding . Наличия двух атрибутов вместо одного требуют интересы разных браузеров, margin — Internet Эксплорер, а padding — Опера и Файер фох. Совмещение разных параметров гарантирует, что показываться web-страница в разных браузерах будет одинаково.
Управлять отдельными отступами от разных краев экрана можно с помощью параметров margin-top , margin-bottom , margin-right и margin-left , которые соответственно изменяют расстояние от верхнего, нижнего, правого и левого края окна браузера. Прежде чем их использовать, следует задать нулевое значение параметрам margin и padding (пример 1).
Пример 1. Изменение верхнего отступа от края браузера
Есть разные способы установки HTML отступов перед текстом. Но для совместимости с различными браузерами и доступности, мы обсудим самые популярные методы:
Рекомендованный способ в CSS и HTML
Чтобы сделать отступ перед текстом или абзацем, лучше использовать CSS . Ниже приведены примеры того, как смещать надписи с помощью каскадных таблиц стилей. Вставьте каждый из приведенных примеров кода между тегами HTML .
Следующий код создает CSS-класс «tab» , который отодвигает символы и абзац на 40 пикселей от левого края:
Вставив приведенный выше код в раздел , можно выполнить его в любом месте, добавляя его в теги абзаца (
), как показано ниже:
Если вы планируете применять этот стиль на нескольких страницах, лучше создать файл .css и связать его со всеми веб-страницами. Чтобы сделать отступ в HTML , добавьте следующую строчку между тегами и создайте ссылку на файл. Мы назвали его « basic.css «:
Как только файл каскадных таблиц стилей создан, откройте его для редактирования и добавьте тот же код, кроме тега и меток комментирования, как показано ниже:
Когда эти шаги выполнены, можно табулировать любой текст, используя тот же самый
Есть и другие варианты. Например, если нужно сместить только первую строку абзаца, то примените приведенный ниже код:
Подсказка: Можно задавать величину отступа в процентах. Например, вместо смещения на 40 пикселей, можно сдвинуть строки на 5% от текущего положения. Можно использовать и длинный пробел при определении нужной ширины.
Бонусная подсказка как сделать отступ в HTML: Чтобы поменять отступ слева на отступ справа, измените свойство margin-left на margin-right .
Рекомендованный метод в HTML
Можно достичь тех же результатов используя стиль, встроенный в HTML- код . Хотя применение CSS делает управление многочисленными веб-страницами легче, если использовать стиль только один раз:
Тут весь текст абзаца смещен на 40 пикселей влево. Другие теги
А здесь только первая строка в абзаце смещается на 40 пикселей слева. Никакие дополнительные строки смещены не будут.
Подсказка : можно задать отступ с помощью процентов. Например, вместо смещения на 40 пикселей, можно заменить значение на 5%, чтобы сдвинуть текст на 5%.
Бонусная подсказка : Можно поменять отступ слева на отступ справа, изменив свойство margin-left на margin-right.
Альтернативный метод
Другой часто применяемый метод HTML отступа текста — с помощью
Хотя это намного легче, но есть проблемы совместимости, которые могут возникнуть из-за применения этого решения. Данный тег предназначен для цитирования, а не смещения:
Данная публикация представляет собой перевод статьи « How do I indent or tab text on my web page or in HTML? » , подготовленной дружной командой проекта Интернет-технологии.ру
Здравствуйте, дорогие друзья!
Рассмотрим несколько способов как сделать отступ текста в HTML.
Навигация по статье:
Отступ текста в HTML при помощи margin
Когда вы размещаете текст на сайте он находится в каком-то теге. Это может быть тег блока
, секции и так далее.
Мы можем задать отступ для тега в котором находится текст при помощи CSS свойства margin.
Делается это так:
Здесь мы воспользовались атрибутом style и в нём указали нужное CSS свойство, задав тексту отступ слева 20px. Так же мы можем задать для нашего блока или другого тега класс и потом в отдельном CSS файле дописать для него стили.
При помощи этого свойства мы можем задать разные отступы тексту в 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 и другие единицы.
Отступ текста в HTML при помощи padding
Этот способ очень похож на предыдущий, но если margin задавал отступ до текста как бы снаружи тега, то padding будет задавать отступ внутри.
Отступ от края окна браузера
Вообщем проблема такова.Дан текст и его вид уже непосредственно в форме html страницы(скриншот.
Постоянный отступ от окна браузера при скроллинге странички
Столкнулся с такой идеей: необходимо, чтобы при пролистывании страницы (вверх или вниз) верхняя.
Почему образуется отступ блока от верхнего края окна браузера?
Доброго времени суток! В коде ниже образуется отступ о верхнего края браузера. То есть <body>.
background-position : fixed; про какой слой ты говоришь? про div или чтоб картинку фоновым слоем сделать?
если картинку, то:
background : url(путь_к_картинке.расширение);
не. ваще хотел создать слой и вот чтоб он был кагбе фон))) а на нем там 2 картинки)))
Jay_D, так а ты открой исходный код и глянь) я всегда так делаю. и вообще сайт какой то поганый честно, с троянами я толком не че не зна)) то и так посмотреть я не че не пойму))) ну на счет вирусов не зна)) загружаю картинку а она не с самого угла а немного с отступом )) это не отступ вокруг картинки это я понял отступ по умолчанию создаваемой страницы))) как его убрать. вообще ума не приложу))) зарание спс)) в body засунь картинку а в style закалбась background-position : fixed;При изменении размеров окна браузера, появляется белый отступ справа
Привет! Собственно столкнулся с такой проблемой- При изменении размеров окна браузера, появляется.
При уменьшение окна браузера текст в меню переносится на новую строчку - убрать
Нормально вот так: | | | Главная Услуги Контакты.
Как убрать отступ?
Как убрать вот этот отступ? margin и padding не предлагать, border неправильно отображается
Как сделать отступы по краям страницы
Как отображающийся документ не растягивать по всей ширине? По краям должны остаться пустоты. Я уже.
Как использовать сетку Бутстрапа,чтоб по краям были пропорциональные отступы?
Есть задача сверстать страницу адаптивно с помощью сетки бутстрапа. Но возникла проблема --- При.
Отступы по краям картинки
Помогите начинающему! Появились отступы по бокам картинки.<!doctype html> <html> <head> <meta.
Отступы по краям у Grid layout
Приветствую Вас, господа прохожие и мастера))) На днях решил сверстать навигационное меню на.
Решение
gogolik, слева и справа нормально стало, а сверху не убралось.Решение
gogolik, а можно так главному заголовку делать? Прижимать его к остальной чуши?
Добавлено через 1 минуту
Verolomstvo, можно. Отступ просто задать внешнему блоку.
А спасибо за то, что сделал так, как хотел ТС.
gogolik, и как сео воспримет зажатый главный заголовок? Он его увидит, как полноценный h1?
Добавлено через 7 минут
Раз: header - блочный, зачем его в div? Теперь загугли h1 блочный или строчный и нужно ли заголовок помещать в заголовок.
Добавлено через 6 минут
Daniil4k,
ты просто где-то увидел шаблон вида
header
main
footer
и теперь следуешь ему
Verolomstvo, я думаю, что человек только учится и не нужно ему голову сходу забивать всякими seo-причудами. А вообще, да, увидит как полноценный заголовок. Главное, чтобы он был на "первом экране".
С точки зрения семантики нет ошибки в конструкции div>header. Потому что может быть общий контейнер, в который обёрнут контент. А уж в конструкции header>h1 вообще нет ошибки.
ну если только это не базовый шаблон, определяющий всего лишь где что находится примерноПоявляются отступы по краям страницы
Имеется несколько страниц html и один css файл все страницы кроме index.html отображаются на весь.
Как убрать отступы
Как можно убрать отступы справа и слева? ссылка на сайт
Как убрать отступы тега br?
как убрать стандартное отступы которые дает тег br
Как убрать непонятные отступы?
Доброго всем времени суток. Возникла такая проблема, появился непонятный отступ снизу, суть в том.
Как убрать отступы слайдера
Есть стандартный слайдер шаблона Helix II, так вот у него есть отступы как по ширине так и по.
Как убрать лишние отступы
Здравствуйте, подскажите пожалуйста почему как убрать лишние отступы. Скриншот и архив прилагается.
Строчные блоки (inline-block) во многих случаях очень удобное средство разметки. Примеры их использования можно посмотреть в статьях Inline-block: простое свойство для непростых задач, Выравнивание навигации из блоков по центру, Центрирование резинового блока по горизонтали.
Вместе с тем, с ними связан подводный камень. Я бы даже сказал целый булыжник. Хочешь его увидеть? Поставь несколько строчных элементов (или строчных блоков) в ряд.
Допустим имеем такой HTML:
Делаем элементы строчными:
…или строчными блоками:
Проблема
Большинство браузеров разделяет строчные блоки (элементы) отступами. Для удобства восприятия я немного раскрасил блоки.
Давай договоримся, что здесь и далее я буду писать просто «строчный блок», а подразумевать «строчный блок (display:inline-block) или просто строчный элемент (display:inline)», поскольку проблема у них совершенно общая и лечится она тоже одинаково.
Кого лечим?
Итак строчные блоки обзавелись загадочными отступами. Конечно, это касается не только списков. Так же поведет себя и группа расположенных подряд, например, span'ов.
Справедливости ради, следует заметить, что IE6 и IE7 отрисуют все это дело без отступов:
Не будем вдаваться в детали вопроса, кто прав, а кто виноват (читай — криво поддерживает стандарты), просто добьемся кроссбраузерности. Очень удобно, когда поведение предсказуемое — не задавал я никаких отступов, значит и рисовать мне их не нужно!
На самом деле все просто — чтобы убрать отступы, нужно понять, откуда они там вообще взялись!
Откуда отступы-то?
А понять не сложно. Достаточно просто записать теги в одну строку:
Чудеса! Отступы пропали сами собой! Вывод: порождают их невидимые символы между тегами — перенос или пробел.
Само собой, «писать все в одну строку» хоть и является кроссбраузерным решением проблемы, но тут не рассматривается, по понятным причинам (ну кто ж пишет без отступов?). Ищем другие пути.
Долой отступы!
Раз отступы создают символы из контейнера, здравой мыслью будет эти символы «обезвредить» — задать им font-size:0; (главное, не забыть, что это свойство наследуется и перебить его для самих потомков):
Отличное решение! Строчные блоки действительно прижались друг к другу. Осталась еще небольшая косметическая проблема: в некоторых браузерах (например, в Opera 9.5 и младше) замечен отступ сверху или снизу в пределах родителя (родитель на рисунке залит бледным серо-зеленым):
Проблема эта сродни описанной в статье IMG внутри блока — убираем странный отступ, и лечится примерно так же: добавляем line-height:0; (опять не забываем перекрыть у потомка). Итак, получаем:
Теперь-то все хорошо и красиво? Не тут-то было!
Пришла беда, откуда не ждали
- их не рисует IE6-7;
- их, несмотря на наши старания, все равно рисуют Webkit-браузеры.
Да-да! И Safari и Chrome после всех вышеизложенных ухищрений соизволили просто уменьшить отступы с трех пикселей до одного!
Update 3.07.2011 by Nick. Еще один скрытый сюрприз преподнес FF. Если масштабировать страницу иногда наблюдается дополнительный отступ в 1px сверху. Лечится это добавлением правила display: -moz-inline-stack;
Окончательное решение
Побороть webkit'ы получилось с помощью letter-spacing:-1px. При этом никаких вредных побочных эффектов обнаружено не было (если, конечно не забыть перекрыть свойство у потомков).
Окончательный CSS с кроссбраузерным решением для строчных элементов:
Для строчных блоков:
Не забудь, что свойство zoom невалидно. Поэтому в боевых условиях выноси его и хак для IE в отдельный CSS, подключаемый с помощью условных комментариев.
Читайте также: