Как сделать отступ в css от края страницы

margin-right

Устанавливает величину отступа от правого края элемента. Отступом является расстояние от внешнего края правой границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от правого края элемента

Синтаксис

margin-right: значение | auto | inherit

Значения

Величину правого отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.

auto Указывает, что размер отступов будет автоматически рассчитан браузером. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

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

Рис. 2. Применение свойства margin-right

Объектная модель

[window.]document.getElementById(» elementID «).style.marginRight

Браузеры

Браузер Internet Explorer 6 удваивает значение левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Как сделать отступы по краям страницы

Появляются отступы по краям страницы
Имеется несколько страниц html и один css файл все страницы кроме index.html отображаются на весь.

Как сделать чтобы у страницы были отступы
То есть чтобы ни просто текст был распластан по всей странице а с отступами слева и справа

Как использовать сетку Бутстрапа,чтоб по краям были пропорциональные отступы?
Есть задача сверстать страницу адаптивно с помощью сетки бутстрапа. Но возникла проблема — При.

Отступы по краям картинки
Помогите начинающему! Появились отступы по бокам картинки.<!doctype html> <html> <head> <meta.

Как сделать отступ в css от края страницы

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

Рис. 2.14. Пустое пространство между заголовком и абзацем, возникающее по умолчанию

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

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

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

 h1  font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif; margin-bottom: 0; > h1+p margin-top: 0; >  

На рис. 2.15 показано, как будет отображаться страница после применения данного правила.

Рис. 2.15. Использование смежного селектора для изменения стиля отображения заголовка

Как видите, первый следующий за элементом h1 абзац отображается без отступа сверху; при этом все последующие абзацы отображаются с отступами.

Как уже было сказано выше, только самые современные версии браузеров поддерживают смежные селекторы – к примеру, в Internet Explorer их поддержка реализована только начиная с 7-й версии. В определенных случаях вполне можно допустить, что пользователи более старых версий будут видеть зазор между заголовком и текстом. Если же вы твердо намерены убрать отступы, отображаемые в старых браузерах, в вашем распоряжении несколько возможностей.

Можно воспользоваться селекторами классов, как в разделе «Использование на одной странице различных стилей ссылок», присвоив свойству margin для каждого элемента класса нулевое значение. Если вы прочли указанный раздел, то использование такого метода не представит никаких сложностей. Кроме того, заголовку можно задать отрицательный отступ. Этот метод далее мы рассмотрим более подробно.

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

h1  font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif; margin-bottom: -0.6em; >  

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

Рассмотрим несколько способов как сделать отступ текста в HTML.

Навигация по статье:

• Отступ текста в HTML при помощи margin
• Отступ текста в HTML при помощи padding
• Отступ текста html при помощи неразрывного пробела
• Отступ текста в HTML при помощи text-indent
• Что делать если отступ не появляются?

Отступ текста в HTML при помощи margin

Когда вы размещаете текст на сайте он находится в каком-то теге. Это может быть тег блока , тег таблицы , абзаца , секции и так далее.

Мы можем задать отступ для тега в котором находится текст при помощи CSS свойства margin.

Делается это так:

< div style = ” margin - left : 20px ; ” >Текст блока HTML < / div >

Здесь мы воспользовались атрибутом style и в нём указали нужное CSS свойство, задав тексту отступ слева 20px. Так же мы можем задать для нашего блока или другого тега класс и потом в отдельном CSS файле дописать для него стили.

< div class = "text-block" >Текст блока < / div >
. text — block < margin - left : 20px ;

Если вы не создаёте страницу с нуля, а редактируете уже существующую, то можно не задавать новый класс, а определить уже имеющийся класс или идентификатор. Как это сделать показано в этой статье:
«Как определить ID и класс элемента на странице?»

При помощи этого свойства мы можем задать разные отступы тексту в 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 будет задавать отступ внутри.