Отступ от блока css. Как сделать отступы в CSS? Из чего выбрать или методы

По умолчанию, каждый новый блок располагается с новой строки. Для того, чтобы расположить блок слева или справа от другого (например, чтобы расположить сайдбар справа), используется свойство float. По умолчанию оно имеет значение «none», но можно также выставлять значения «left» и «right».

Рассмотрим это свойство на примере с двумя блоками.

Этот код даст следующий результат:

Свойство clear

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

Для того, чтобы избежать этого, блочная верстка div использует свойство clear, которое должно быть задано для того блока, который мы хотим расположить с новой строки. Чаще всего для этого ему задается значение «both», но можно также задать значения «left» или «right», если мы хотим не просто расположить блок на новой строке, но и задать ему выравнивание.

Дополним вышеуказанный пример новым элементом:

Результат:

Отступы в блочной верстке

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

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

Margin: 20px 10px 0 40px

Блок с такими параметрами будет располагаться на 20 пикселей ниже вышестоящего элемента, на десять пикселей от правостоящего элемента, будет иметь нулевой отступ снизу и будет иметь отступ размером в 40 пикселей слева.

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

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

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

Как и в обычной жизни, в верстке бывают аномальные ситуации, которые сложно объяснить. Именно такая ситуация может возникнуть, когда тег для вставки изображений (img) вставляется в контейнер, который обладает свойствами блочного элемента или плавающего объекта. Конфуз этой ситуации заключается в непонятном отступе, появляющемся ниже изображения.

Рассмотрим практический пример

Итак, для наглядности и лучшего восприятия проблемы предлагаю все посмотреть и, так сказать, «пощупать» на практике. Берем любое изображение и одеваем его в div. Ниже вы видите пример кода:

HTML

< div> < img src= "img.png" width= "250px" alt= "" />

При оформлении стилей зальем внутренний фон блока красным цветом. При нормальных условиях картинка полностью займет все место внутри блока и перекроет красный фон. Прописываем код для оформления

div { display: block; width: 250px; margin: 0px auto; /*Центруем блок*/ background: #ff0000;/*Зальем блок красным цветом, чтобы визуализировать отступ*/ } body { background: #eee; }

В результате чего браузер нам покажет следующую картину

Судя по красной полосе в нижней части контейнера можно констатировать, что непонятный отступ имеет место. Воспользовавшись панелью веб-мастера в браузере, стало известно, что отступ составил 5,511 пикселей.

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

Причина появления отступа

Как человек с высшим техническим образованием смею Вас заверить, что ничего не происходит просто так, у всего есть причины. Разобравшись в этом вопросе я еще раз в этом убедился. Весь конфуз заключается в стандартных свойствах элементов. По умолчанию тег img имеет свойства строчного элемента, что в свою очередь означает, что элемент будет выравниваться по базовой линии текста. Эта линия располагается чуть выше нижнего края блока, так как для текста существует обязательный запас- место под «хвосты» букв.

Решение проблемы

Для исправления этого мелкого недочета достаточно присвоить изображению свойства блочного элемента. С этим нам поможет свойство display , прописываем картинке display: block; и избавляемся от ненужных проблем. Также можно подключить вертикальное выравнивание через свойство vertical-align . Это тоже поможет избавиться от нежелательного отступа.

В каких браузерах работает?

Блочная модель CSS в английском языке называется Box model (box - это коробка). Этот перевод немного помогает понять суть блочной модели. Суть в том, что при формировании страницы на экране используются блоки - прямоугольные области экрана.

Блочная модель CSS - это одна из основ для понимания CSS, модель форматирования документа.

Перед изучением CSS вы должны были изучить HTML, а значит вам должно быть известно что теги HTML делятся на блочные элементы и строчные элементы.

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

  И

  .
• Строчные элементы - теги которые не создают своих блоков, а влияют на отображение содержимого блока. Пример таких тегов - , , и другие.

Давайте на примере рассмотрим отличия этих групп элементов.

создают свои блоки. Каждый блок начался с новой строки. Для блока

была задана ширина и высота, а блок

Занял всю ширину экрана, его высота равна высоте его содержимого. Чтобы это было видно, для обоих элементов установлен жёлтый фоновый цвет.

Тег просто отформатировал текст внутри блока

Подробнее про блоки.

Любой блочный элемент имеет установленный набор свойств, которые можно менять при помощи CSS.

Основа блока - его контент или содержание, ширина поля контента задаётся свойством width , а высота свойством height . Но у блока есть и другие поля, они как листья капустны накладываются друг на друга.

Проще показать это в виде рисунка.

Мы видим, что кроме самого поля контента, у блока есть ещё три свойства:

• Внутренний отступ - padding - по английский "набивка". Набивка - то, что набито, чем заполнена внутренность чего-либо. padding - это часть блока от края контента до границы.
• Граница - border - по английский и есть "граница". Границу блочного элемента можно установить разными стилями: сплошной линией, точками, пунктиром; можно установить цвет границы. Подробно о том, как управлять свойством border речь пойдёт ниже.
• Внешний отступ - margin - по английски "маржа". В экономическом значении маржа значит разницу между себестоимостью и ценой.

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

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

Блок тега div.

Блок тега p. Этот абзац имеет знаяения свойств по умолчанию.

Стиль: padding: 10px.

Стиль: margin: 30px.

Результат должен быть такой:

Рисунок 2. Работа примера №2.

Мы видим чёрную (black ) рамку толщиной 3px вокруг блока, созданного тегом

. Первый абзац отформатирован по умолчанию, за исключением фонового цвета. Во втором абзаце установлен внутренний отсуп (padding ) размером 10px , видно что вокруг текста площадь заливки фоновым цветом увеличилась. Третий абзац не имеет внутреннего отступа, но задан внешний отступ margin размером 30px . Мы видим что расстояне между этим и вторым абзацем больше, чем между вторым и первым - это работает внешний отступ.

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

Как устанавливаются фоновые цвета для этих свойств?

• Внутренний отступ - padding - всегда имеет цвет фона самого элемента, заданного в свойстве background-color .
• Граница - border - её цвет задаётся свойством border-color .
• Внешний отступ - margin - он всегда прозрачен, поэтому цвет этой области совпадает с фоновым цветом элемента родителя (в нашем случае это белый фоновый цвет элемента установленный по умолчанию).

Расширенные возможности управления свойствами блока

Кроме управления всеми сторонами блока одновременно, есть позможность управлять каждой стороной каждого свойства отдельно. Вот рисунок, который демонстрирует свойства CSS для такого управления стилями блока.

Рисунок 3. Блочная модель CSS.

Рассмотрим подробнее свойства блоков и приведём примеры их использования.

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

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

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

Результат должен быть такой:

Рисунок 4. Работа примера №3.

Мы видим красиво оформленный блок с внутренними отступами до границы.

Граница - border

Границы - это линии вокруг внутреннего содержимого элемента. Границу можно установить для всех сторон блока, или для любого числа. Для границы можно задать толщину, стиль и цвет. Для создания рамки (границы), как писалось ранее, в CSS существует свойство border . В этом свойстве можно прописать все характеристики рамки (толщину, стиль и цвет). А для создания границ на отдельных сторонах блока нужно воспользоваться свойствами border-top , border-right , border-bottom и border-left .

Результат выполнения кода должен быть такой:

Рисунок 5. Работа примера №4.

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

Отступ - это пространство от границы блока до его внешнего края. Отступы устанавливаются свойством margin . Как и в случае с внутренними полями и границами, отступы можно задавать для любой стороны блока. Например, свойство margin-left управляет отступом блока с левой стороны.

Особенности внешних отступов.

• Внешний отступ всегда прозрачен. Он не принимает цвет фона или фоновое изображение установленное для блока, к которому он относится. Однако, он принимает фон родительского элемента.
• Внешние отступы суммируются. Если между блоками заданы отступы по 25px, то расстояние между ними будет не 50px, а 25px, так как внешние отступы накладываются друг на друга.
• Для внешнего отступа можно задавать отрицательное значение. Такое значение сдвигает блок, например объявление margin-left : -20px сдвинет блок влево на двадцать пикселей.
• Отступы можно задавать в процентах, такие отступы вычисляются от размера блока контента. Это будет делаться в отношении как горизонтальных, так и вертикальных отступов.

Прошли тысячелетия. Механизм, предназначенный для работы вечно, остановился. Системы жизнеобеспечения были повреждены.

Прошли тысячелетия. Механизм, предназначенный для работы вечно, остановился. Системы жизнеобеспечения были повреждены.

Странник оглянулся вокруг. Во всех направлениях до горизонта была пустыня.

Рассмотрим этот пример подробней. Результат его выполнения должен быть такой:

Рисунок 6. Работа примера №5.

Для тега

Тут задана рамка толщиной 1px. Это сделано для того, чтобы было видно где начинается область внешнего отступа этого тега.

Один тег

Помещён в блок

с установленным фоновым цветом. Видно что внешний отступ тега

Принял фоновый цвет тега

. А теги

Находящиеся вне этого блока, имеют белый цвет внешнего отступа, соответствующий фоновому цвету блока по умолчанию.

Последний, пустой абзац, имеет высоту height : 20px , он помещён в пример только для того, чтобы было лучше видно что расстояние между абзацами составляет 20px и равно высоте этого пустого абзаца. В таблице стилей для тега

Задано объявление margin : 20px , видно что внешние отступы абзацев сливаются и расстояние между абзацами равно не 40px, а 20px.

Ширина блока - составная величина, она складывается из суммы значений нескольких свойств:

• width - ширина содержимого блока;
• padding-left и padding-right - внутренний отступ слева и справа от содержимого;
• border-left и border-right - толщина границы слева и справа;
• margin-left и margin-right - внешний отступ слева и справа.

Значения некоторых свойств могут быть равны нолю, тогда они не влияют на ширину блока.

На рисунке 7 блок обозначен чёрной пунктирной линией.

Рисунок 7. Ширина блока.

Если в блоке значение width не задано в таблице стилей, то оно устанавливается по умолчанию как auto . В этом случае поле контента займёт всю доступную ширину (родительский блок или, если его нет, окно браузера), но размеры всех отступов и граница при этом сохранятся.

Посчитаем ширину блока на примере следующего стиля:

Width: 400px; /* Ширина блока */ padding: 5px; /* Отступ до границы */ border-width: 3px; /* Толщина границы */ margin: 7px; /* Внешний отступ */

Сложим все слагаемые, составляющие ширину блока:

Ширина блока = 400 + 5*2 + 3*2 + 7*2 = 430px.

Устаревшая блочная модель

Исторически так сложилось, что метод расчёта ширины блока описанный выше использовался не всегда. На данный момент он является стандартом, принятым концерном W3C. Но раньше свойство width не было равно полю контента, а представляло собой постранство блока, которое включает свойство border . Источником такой блочной модели была компания MicroSoft и на её основе работал браузер Internet Explorer до версии 7. На рисунке продемонстрировано сравнение двух блочных моделей.

Рисунок 8. Две блочные модели.

В сети сохранилось огромное количество старых документов, которые создавались в старой блочной модели, которую также называют «режим совместимости». Поэтому списывать её со счетов не стоит.

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

Свойство box-sizing

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

Подробно вникать в суть проблему не будем, это не уровень этой статьи. Тут только отмечу, что устаревшая система иногда оказывается полезной. Для возможности менять алгоритм блочной модели в CSS3 ввели полезное свойство box-sizing . При значении border-box ширина блока начинает включать поля и границы, но не внешние отступы. Таким образом, назначая свойству box-sizing значение border-box , мы можем задавать ширину блока width в процентах и спокойно указывать свойства border и padding нужной нам величины, не боясь, что изменится ширина блока.

При формировании высоты блока используется та же формула, что и при формировании ширины блока. Высота блока - это сумма высоты поля контента, границы, внутреннегот и внешнего отступов (верхних и нижних конечно же). Если значение свойства height не указано, то по умолчанию устанавливается значение auto , в этом случае высота поля контента вычисляется автоматически и зависит от самого контента.

На рисунке 9 показаны все свойства, из которых складывается суммарная высота блока, обозначенного чёрным пунктиром.

Рисунок 9. Высота блока.

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

Давайте сразу передём к примеру и рассмотрим случай, в котором свойствам блока width и height назначены значения 200% .

Блоку также задан фоновый цвет, чтобы была видна его площадь. Вот как он выглядит:

Рисунок 10. Работа примера №6.

Мы видим что по горизонтали образовалась полоса прокрутки, размер которой в два раза превышает размер окна браузера, т.е. блок по ширине всегда равен 200% от родительского элемента - окна браузера. Но во вертикали такого эффекта нет. Использование процентов для указания высоты не имеет смысла, так как высота высота родителя по умолчанию не существует и её надо указывать.

Блок с шириной = 200% и высотой = 100%.

Тут родительскому элементу для

- тегу , установлена высота величиной 50px, и высота для

установлена 100%. То есть этот тег имеет высоту 50px.

Рисунок 11. Работа примера №7.

Видно, что площадь окрашенная в цвет #F3F3D6 увеличилась. Если окно браузера ещё уменьшить по высоте, то появится вертикальная полоса прокрутки, чего в прошлом примере не было.

Если в этом примере Но как сделать так, чтобы задать блоку параметр height в процентах и это работало. Попробуйте изменить прошлый пример и для селектора body установить свойство height равное 100% . Такой пример работат не будет. Почему? Потому что для тега высота определяется относительно его родителя - тега , а там высота не задана. Значит 100% от ничего равно ничего. Чтобы решить эту проблему нужно написать такой стиль:

Блок с шириной и высотой = 200%.

Только установив высоту в 100% для тегов и мы сможем установить высоту в процентах для тега

и она будет работать.

Рисунок 12. Работа примера №8.

При работе с высотой блока следует помнить о ещё одной особенности, если контент превышает размер блока, то он выходит за его рамки. Вот пример такого кода:

Прошли тысячелетия. Механизм, предназначенный для работы вечно, остановился. Системы жизнеобеспечения были повреждены.

На примере видно, что текст вышел за границы блока.

Рисунок 13. Работа примера №9.

Избежать подобного очень просто - достаточно не задавать высоту контента (height ). Впрочем, иногда нужно строго определить высоту блока. В этом случае можно использовать свойство overflow со значением auto . Это свойство будет в блоке создавать полосу прокрутки в случае, если размер контента привысит размер блока.

Добавим в стиль примера №9 свойство overflow со значением auto и результат будет таким:

Рисунок 14. Свойство overflow со значением auto.

У свойства overflow есть другое значение, которым также можно регулировать высоту блока - hidden (англ. скрытый). Это значение просто скрывает всё, что не влазит в установленные размеры блока.

Рисунок 14. Свойство overflow со значением hidden.

Минимальная и максимальная ширина элемента

В этой статье также уместно вспомнить свойства min-width и max-width устанавливающие минимальную и максимальную ширину элемента соответственно.

Свойство min-width работает так: если пользователь меняет размеры окна браузера, то ширина блока не становиться меньше минимальной, а в таком случае появляется полоса прокрутки. Значение ширины элемента будет зависеть от значений свойств width , max-width и min-width .

В таблице приведены правила расчёта браузерами ширины блока при использовании этих свойств.

Табл. 1. Ширина элемента

Значения свойств					Ширина
min-width	<	width	<	max-width	width
min-width	>	width	>	max-width	min-width
min-width	>	width	<	max-width	min-width
min-width	<	width			width
min-width	>	width			min-width
min-width	>			max-width	min-width
min-width	<			max-width	max-width

Свойство max-width - устанавливает максимальную ширину элемента. Пример использования свойства max-width :

Прошли тысячелетия. Механизм, предназначенный для работы вечно, остановился. Системы жизнеобеспечения были повреждены.

Странник оглянулся вокруг. Во всех направлениях до горизонта была пустыня.

Минимальная и максимальная высота элемента

Аналогично есть свойства для назначения минимальной и максимальной высоты элемента: min-height и max-height .

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

Блочная модель и позиционирование

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

div-контейнер

Элемент списка

А так это выглядит в браузере:

Для блоков указывают размеры полей и отступов. Определяют и границу между ними, она же будет и рамкой самого блока. Эти внутренние отступы(поля) и размеры рамки меняют первоначальные длину и ширину блока.

Порядок позиционирования в CSS определяется свойством position. Свойство position имеет пять значений:

• static — применяется по умолчанию, и не изымается из общего потока веб-документа. К блокам с таким значением позиционирования не применимы параметры top, right, bottom и left.
• inherit — задает блоку значения родительского элемента
• relative — относительное поз — ие
• absolute — абсолютное позиц — ие
• fixed — фиксированное позицио — е

Задачи позиционирования — расположить бл.элемент на строго заданном месте, и определить его влияние на, расположенные вокруг него, другие элементы.

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

Вот только место, только что покинутое элементом, из общего потока не изымается. Переместившись на другую позицию, блок по-прежнему влияет на соседние веб-конструкции, как если бы, он оставался на месте.
Предлагаю посмотреть действие свойства position: relative; на примере. Использован предыдущий код, с добавлением ширины всем блокам по 150px , также обнулены все отступы и поля по умолчанию, и еще для тега div добавили следующее:

position:relative;
top: 30px;
left:80px;

Теперь посмотрите скриншот.

Как видите, div переместился вправо и вниз относительно своих прежних координат. Блок li остался на прежнем месте. Подняться на освободившееся место ему мешает особенность значения relative, упомянутое выше. Но есть еще одна особенность у относительного позиционирования.

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

Популярное

Тест бесплатных почтовых сервисов Самостоятельная смена пароля на Wi-Fi-роутере Wise Registry Cleaner — умный клинер Registry cleaner на русском языке Выбор из выпадающего списка в HTML Язык xhtml. Что такое XHTML? Ошибки в XHTML и отличия XHTML от HTML. Все теги и атрибуты должны писаться в нижнем регистре