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

WEB-дизайн

padding — Устанавливает значения полей вокруг содержимого элемента (расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое).

Значения:
  • inherit — указывает, что свойство наследуется у родителя.
  • величина поля в пикселах (px), процентах (%) или других допустимых для CSS единицах. Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений:
Пример:
Свойство:

padding-top, padding-right, padding-bottom, padding-left — величина отступа между указанной границей элемента и его содержимым.

padding-left padding-bottom padding-right padding-top
Значения:
  • величина поля в пикселах (px), процентах (%) или других допустимых для CSS единицах.
Свойство:

margin — устанавливает величину отступа от каждого края элемента (пространство от границы текущего элемента до внутренней границы его родительского элемента).

Если у элемента нет родителя, отступом будет расстояние от края элемента до края окна браузера с учетом того, что у самого окна по умолчанию тоже установлены отступы. Чтобы от них избавиться, следует устанавливать значение margin для селектора тэга <BODY> равное нулю.

Значения:
  • auto — размер отступов будет автоматически рассчитан браузером;
  • величина отступов в пикселах (px) или других допустимых для CSS единицах;
  • величина отступов в процентах (%).

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

Число значений Результат
1 Отступы будут установлены одновременно от каждого края элемента.
2 Первое значение устанавливает отступ от верхнего и нижнего края, второе — от левого и правого.
3 Первое значение задает отступ от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
4 Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.
Пример:
Свойство:

margin-top , margin-right , margin-bottom , margin-left — устанавливает величину отступа от соответствующего края элемента

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

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

Внешние и внутренние отступы в CSS. Параметры margin - padding

margin &#8212; внешний отступ

Для более точного выравнивания веб объектов сайта воспользуйтесь CSSпараметром – margin. К примеру, самым простым применением станет такая форма:
margin: 20px;
(при этом внешние отступы со всех четырех сторон будут равны 20 пикселей).

Для того чтобы назначить неравнозначные значения для отступа, следует применить следующий вид:
margin: 10px 5px 20px 5px;
(при этом каждой из четырёх сторон присваивается собственное значение в пикселях. Слева направо: верх, лево, низ, право).

Помимо этого параметр «margin» может принимать и такие формы:
margin-top: 10px;
margin-left: 5px;
margin-bottom: 20px;
margin-right: 5px;
(при этом каждый из указанных параметров может выступать индивидуально или в сумме, что аналогично примеру приводимому абзацем выше).

padding – внутренний отступ

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

Зачастую, можно видеть применение обоих параметров в одном стиле, то есть для выбранного объекта работает как внешнее выравнивание, так и внутреннее!
пример:
.button <
float: none;
margin: 10px 5px 20px 5px;
padding: 3px
>
(при этом заданный стиль, скажем для «кнопки», будет иметь неравные внешние отступы заданных значений, и равнозначные внешние. Такой вариант будет полезен при построении веб формы).

Вариант применения в коде

Для того чтобы применить на практике выравнивание можно задать новый стиль в таблице CSSшаблона сайта или отредактировать имеющийся. Например, многие объекты сайта подкорректированы созданными или изменёнными стилями, которые благополучно выровняли или сместили код. Нижняя часть сайта «footer» была уменьшена и выровнена по центру параметром: margin: 0 auto;
(при этом внешний отступ принял равные значения для правого и левого края).

НУ или Вы можете создать стиль, окружив код тегами «div». В этом случае, всё немного проще и выглядит следующим образом:
<divstyle=“float: left; margin; 10px 5px 20px 5px; padding: 3px;”>
ваш код заключаемый в стиль
</div>

Вместо послесловия

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

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

внешний и внутренний отступы в cssДля более красивого отображения элементов на web-странице применяют внешний и внутренний отступы в css и на примерах мы это сейчас разберём.

Каждый элемент, будь это параграф, div, картинка или видео, &#8212; это некий блок, в котором можно сделать отступы как внутри с помощью свойства padding , так и снаружи с помощью margin .

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

Обязательно нужно уяснить и запомнить, что для параметров margin и padding построение отступов для каждой стороны идёт одинаковое.
То есть, у нас по 4 значения в каждом отступе:

  • Первое значение: отступ сверху;
  • Второе значение: отступ справа;
  • Третье значение: отступ снизу;
  • Четвёртое значение: отступ слева.

В данном примере я сделал margin внешний отступ в css таким образом: сверху я прописал 20px , слева и справа по 10px ( как правило они для симметрии прописываются одинаковые ), и снизу указал 30px .

А для padding внутреннего отступа я указал: по 10px сверху, слева и справа, и 14px снизу.

Значение для отступов в свойствах margin и padding можно сокращать, при условии если они имеют одинаковую величину.
Из моего примера сокращённая запись будет иметь такой уже вид:

То есть, когда отсутствует последняя числовая запись, в данном случае для отступа слева, то браузер автоматически подставляет для отступа слева такое же значение как и у значения справа.
И в моём случае отступы справа и слева будут по 10px что в margin , что в padding .

А если у вас одинаковые величины для внешних отступов сверху и снизу ( к примеру: 16px ), и так же одинаковые величины для внешних отступов слева и справа ( к примеру: 20px ), то запись будет иметь ещё более сокращённый вид:

Применение одинарных отступов: для каждой стороны отдельно.

Свойства отступа для каждой стороны.

  • margin-top: 3px; внешний верхний отступ;
  • margin-left: 4px; внешний левый отступ;
  • margin-right: 6px; внешний правый отступ;
  • margin-bottom: 10px; внешний нижний отступ.

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

К примеру у вас для всех картинок img уже прописаны в css все отступы.

То есть ( для уяснения ) внешний отступ имеет такие значения: сверху 10px , слева и справа: по 20px , и снизу 14px .
А внутренний отступ равен по 6px со всех 4-ёх сторон.

Допустим, вы решили поставить ещё картинку на страницу, но для неё вы хотите изменить только внешний отступ сверху, а остальные оставить как есть. И для выполнения этой задачи достаточно прописать class для этой картинки, и добавить в css дополнительную запись.

В итоге, добавленная вами картинка с классом verx примет все отступы прописанные в css для тега img , и изменит только внешний отступ для верхней стороны ( в нашем случае: 40px ).

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

CSS урок 10. Отступ и граница элемента CSS

Элемент в html &#8212; это прямоугольник, для которого можно указать величины внутренних и внешних отступов, а также границу, которая разделяет их.

пример отступа элемента

Отступы в CSS устанавливаются, например, для блочных элементов и таблиц. Рассмотрим основные свойства CSS для установки отступов:

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

Внешние отступы в CSS задаются при помощи свойства margin , которое устанавливает величину отступа от границ текущего элемента до внутренней границы его родительского элемента.
css margin-left
Свойство:

  • margin-bottom (нижний отступ)
  • margin-left (отступ слева)
  • margin-right (отступ справа)
  • margin-top (верхний отступ)

Значения:

  • auto
  • величина: px или em
  • %

Краткая запись:

margin:margin-top margin-right margin-bottom margin-left; margin:10px 20px 20px 30px;

Пример:

</style></head> <body> <div> Агния Барто &#8212; стихи <p> Я на уроке в первый раз.<br/> Теперь я ученица.<br/> Вошла учительница в класс,-<br/> Вставать или садиться?<br/> </p> .

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

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

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

Свойства:

  • padding-bottom (нижний отступ)
  • padding-left (отступ слева)
  • padding-right (отступ справа)
  • padding-top (верхний отступ)

Значения:

  • auto
  • величина: px или em
  • %

Краткая запись:

padding:padding-top padding-right padding-bottom padding-left; padding:10px 20px 20px 30px;

Пример:

</style></head> <body> <p> Я на уроке в первый раз.<br/> Теперь я ученица.<br/> Вошла учительница в класс,-<br/> Вставать или садиться?<br/> </p> .

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Граница элемента (рамка)

Граница элемента в CSS устанавливается при помощи свойства border .

border-style (стиль границы)

Значения:

  • none (без границы)
  • dotted (из точек)
  • dashed (пунктирная)
  • solid (сплошная)
  • double (двойная)
  • groove (трехмерная)
  • ridge (трехмерная)
  • inset (трехмерная с тенью)
  • outset (трехмерная с тенью)

Пример:

border-width (ширина границы)

Значения:

  • thin (тонкая)
  • medium (средняя)
  • thick (толстая)
  • значение

Пример:

</style></head> <body> <p на уроке в первый раз.<br/> Теперь я ученица.<br/> Вошла учительница в класс,-<br/> Вставать или садиться?<br/> </p> <p надо парту открывать,<br/> Не знала я сначала,<br/> И я не знала, как вставать,<br/> Чтоб парта не стучала.<br/> </p>

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Как надо парту открывать,
Не знала я сначала,
И я не знала, как вставать,
Чтоб парта не стучала.

border-color (цвет границы)

Значения:

  • red (цвет)
  • rgb(255,0,0) (в системе rgb)
  • #ff0000 (в шестнадцатиричной системе)
  • transparent (прозрачная)

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Краткая запись:

border:border-width border-style border-color; border: 1px solid #000;

Внешние границы (outline)

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

outline-color (цвет)

Значения:

  • red (цвет)
  • rgb(255,0,0) (в системе rgb)
  • #ff0000 (в шестнадцатеричной системе)
  • invert (инвертированный, противоположный)
outline-width (ширина)

Значения:

  • thin (тонкая)
  • medium (средняя)
  • thick (толстая)
  • значение
outline-style (стиль границы)

Значения:

  • none (без границы)
  • dotted (из точек)
  • dashed (пунктирная)
  • solid (сплошная)
  • double (двойная)
  • groove (трехмерная)
  • ridge (трехмерная)
  • inset (трехмерная с тенью)
  • outset (трехмерная с тенью)

Краткая запись:

outline:outline-color outline-style outline-width; outline: #0f0 solid thick;

Некоторые приемы с границей

Рамка вокруг изображения

Пример:

Результат:

пример внутренних отступов css

Двойная рамка с использованием CSS

Пример:

Результат:

Путь осилит идущий,

И поэтому я иду.
Через горы и пущи,
Через радость мою и беду.

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

Внутренний отступ &#8212; пустое пространство между содержимым элемента и его рамкой (если она установлена). Для добавления и управления шириной внутренних отступов со всех четырех сторон элемента используется свойство padding.

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

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

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

порядок значений в свойстве padding
порядок значений в свойстве margin

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

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

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

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

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

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