Когда использовать padding а margin. Поля и отступы CSS: отличия свойств margin и padding
Здравствуйте, уважаемые читатели блога сайт. Сегодня я хочу продолжить тему изучения и рассмотреть те стилевые правила, которые позволяют задать отступы и границы для Html элементов: border, margin и padding.
До этого мы успели изучить довольно-таки простые свойства, которые управляли шрифтами (), текстом () и рассмотрели модель
Да, еще мы и принципы использования успели рассмотреть во всех подробностях (растянувшихся на несколько статей). Теперь пора переходить к правилам, которые составляют основу построения документов (вебстраниц), и начнем мы именно с блочной модели (взаимоотношения Html элементов).
В общих чертах я уже писал про и современную , ну, а сегодня будет уже чистая конкретика. Если вы захотите ознакомиться с предыдущими публикациями по теме, то милости прошу в .
Блочная модель в CSS — padding, margin и border
В-третьих, могут использоваться проценты. От чего же они считаются? Оказывается, что от ширины контейнера (то есть от области контента родительского элемента). Причем, это относится не только к margin-right и left, что было бы логично, но и для margin-top и bottom проценты будут рассчитываться именно от ширины (а не высоты) контейнера.
Надо отметить, говоря про задание размерных значений, что Margin может быть еще и отрицательным . Т.е. при задании положительного значения для внешнего отступа мы отодвигаем соседний элемент на указанное расстояние, а в случае указания отрицательного — соседний блок просто-напросто заедет на тот, для которого мы этот отрицательный отступ задали. И это очень часто используется в CSS.
Ну и само собой разумеется, что существует сборное CSS правило Margin, которое во многих случаях позволяет сократить размер кода используемого для задания требуемых внешних отступов. Порядок следования значений в нем строго регламентируется (они прописываются через пробельный символ) и должно соответствовать образцу:
Т.е. перечисление начинается с верхнего (top) и продолжается по часовой стрелке вплоть до завершения круга правым отступом (right). Выглядеть это может примерно так:
Margin:20px 10px 40px 30px;
И это будет означать, что браузер сверху от нашего блока должен сделать отступ в 20 пикселей, справа — в 10, снизу — в 40, а слева — в 30. Т.е. эта запись будет эквивалентна такой:
Сокращение CSS кода видно невооруженным глазом. Но и это еще не предел. Вполне допустимо использовать в сборном правиле не только четыре, но и три, два и даже всего одно значение. Что еще больше поможет уменьшить размер кода. Однако, уменьшать количество значений можно будет только в определенных случаях:
- Если величины внешних отступов слева и справа будет одинаковыми, например, так:
margin:20px 30px 40px 30px;
То последнее можно будет опустить:
Margin:20px 30px 40px;
Эти две записи сборного правила делают одно и то же. Поэтому, если вы видите запись с тремя величинами в Margin, то величину четвертого (справа) можно будет подсмотреть во втором (слева).
В случае равенства отступов сверху и снизу такой фокус уже не пройдет, ибо по логике можно уменьшать структуру записи сборного правила, лишь отсекая дублирующее значения с ее конца (а значение нижнего отступа будет стоять предпоследним).
- Если кроме равенства внешних отступов слева и справа имеет место быть равенство их величин сверху и снизу:
margin:20px 30px 20px 30px;
или, что то же самое (в силу пункта 1):
Margin:20px 30px 20px;
То такое сборное правило можно записать всего с двумя значениями, отбросив последнее, которое совпадает с первым:
Margin:20px 30px; В этом случае первая величина описывает внешние отступы по вертикали, а вторая — по горизонтали.
- Ну и, наконец, если все значения в сборном правиле будут одинаковыми:
margin:20px 20px 20px 20px;
или, что то же самое (в силу пункта 2):
Margin:20px 20px;
То можно будет использовать максимально сокращенный тип записи (отбросив последнее значение совпадающее с первым):
Margin:20px; Что будет означать одинаковый внешний отступ со всех сторон от нашего Html элемента.
Говоря про внешние отступы, стоит упомянуть про такую схему как «Margin-colloapse» или, по другому, «схлопывание марджинов». В двух словах суть этого явления заключается в следующем.
Если у нас есть два блока расположенные друг под другом (схлопывание марджинов может происходить только по вертикали) и для них обоих заданы встречные внешние отступы (например, нижний для верхнего элемента и верхний отступ для нижнего), то большее значение Margin поглотит в себе меньшее.
Например, если для верхнего блока задано следующее:
Margin:20px 20px 200px 20px;
А для нижнего:
Margin:100px 20px 20px 20px;
То нижний марджин верхнего блока (200px) поглотит в себе верхний марджин нижнего (100px, да и даже если он станет равен 199px ничего не изменится) и результирующий внешний отступ между этими двумя блоками все равно будет равен 200px. Т.е. в расчет принимается только лишь больший по модулю Margin, и он никак не складывается со встречным значением соседнего по вертикали элемента.
Такая вот заковыка, которая работает исключительно по вертикали, а по горизонтали встречные размеры Margin будут просто плюсоваться друг к дружке. Но это только касаемо марджинов с одинаковым знаком, а вот если они будут с разными знаками, то их числа просто сложатся и блоки будут отстоять друг от друга на результирующую величину.
Например, в этом случае:
Верхний margin:20px 20px -20px 20px; Нижний margin:10px 20px 20px 20px;
Результирующий отступ между блоками будет равен -10px, т.е. нижний на 10px наедет на верхний Html элемент.
Еще одной особенностью использования правила Margin в CSS является то, что прописанное значение по вертикали для строчных элементов игнорируется . Задав:
Margin:20px;
Например, для , которая является строчным элементом, мы реально увидим только отступы по горизонтали, а по вертикали никаких изменений не произойдет.
Забегая чуть вперед скажу, что Padding у строчных тегов по вертикали сработает, но увеличившийся внутренний отступ никак не скажется на его общем положении относительно других соседних элементов.
В случае блочного тега (заголовки, абзацы) увеличившийся по вертикали Padding подвинул бы этот элемент относительно других соседних блоков.
Ну и рамка (Border), а точнее ее ширина, тоже не сможет отодвинуть по вертикали от строчного тега другие соседние блоки. Для строчных элементов движуха возможна только в одном направлении — по горизонтали и все.
Padding и border — внутренние отступы и рамки
Давайте теперь перейдем к заданию внутренних отступов с помощью правила Padding и посмотрим, какие именно значения оно может принимать:
Как вы можете видеть, тут нет упоминания Auto, а также это CSS правило не допускает использование отрицательных значений (они могут быть только положительными — от нуля и выше). Т.е. с помощью Padding контент за пределы рамки выдвинуть никак не получится. Максимум что можно сделать, это контент вплотную приблизить к рамке.
Проценты в нем считаются точно так же, как в Margin — относительно ширины контейнера (области контента родительского элемента), в котором заключен наш элемент. Сборное правило Padding в Css формируется и подчиняется тем же законам, что и рассмотренное чуть выше:
Padding:20px 10px 40px 30px;
В этом правиле мы, начиная с верха, описываем все четыре стороны. Если в нем нужно будет чего-то сократить (до трех, двух или даже одного значения), то использовать нужно будет описанные чуть выше принципы сокращения для внешних отступов, которые ровно с таким же успехом будут работать и для внутренних.
И последнее, что сегодня я хотел бы рассмотреть — это рамки, которые задаются с помощью Border . У них есть три типа параметров:
- Border-width — задает толщину рамки
- Border-color — задает ее цвет
- Border-style — тип рамки или же тип линии, которой она будет отрисована
У всех этих трех CSS правил имеется допустимый набор значений:
Ширина линии для рамки (Border-width ) может задаваться как с помощью цифр в Em, Ex или Px, так и словами:
- Thin — тонкая линия;
- Medium — средняя (данное значение используется по умолчанию);
- Thick — толстая.
В качестве значения для цвета рамки (Border-color ) можно использовать принятые для способы их задания (шестнадцатеричный код, слова и т.д.):
Border-color:red;
По умолчанию, если цвет для рамки явно не задан, то будет использоваться тот, который используется для шрифта внутри данного элемента.
CSS свойство Border-style позволяет задать словами тип рамки:
- None — без рамки (используется по умолчанию)
- Dotted — линия отрисовывается точками
- Dashed — пунктиром
- Solid — сплошной линией
- Double — двойной линией
- Groove — вдавленная рамка
- Ridge — выпирающая
- Inset и outset — игры с тенью
Естественно, что раз есть четыре стороны любого блока, то можно использовать как общие правила, так и отдельные для каждой из сторон:
Тоже самое будет касаться и сборного правила Border — оно может быть прописано как для всех сторон одновременно (Border), так и для каждой из сторон в отдельности (Border-top, left, bottom и right). Порядок следования значений не важен:
Border:1px solid red;
Если что-то пропустить, то вместо него будет использоваться значение по умолчанию.
Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на");">
Вам может быть интересно
Height, width и overflow - CSS правила для описания области контента при блочной верстке
Position (absolute, relative и fixed) - способы позиционирования Html элементов в CSS (правила left, right, top и bottom)
Разное оформление для внутренних и внешних ссылок через CSS
Float и clear в CSS - инструменты блочной верстки
Display (block, none, inline) в CSS - задаем тип отображения Html элементов на вебстранице
Шастая по форумам наткнулся на то, что до сих пор возникает вопрос, что делает padding , а что margin , и какие отличия между ними. Именно поэтому я решил напомнить об этом. Итак, не прибегая к заумным фразам поставим задачу и разберём пример, на котором всё станет ясно.
Задача : на странице нужен блок красного цвета (200х200 пикселей), который отступает от краёв браузера сверху и слева на 40 и 70 пикселей соответственно, и текст внутри которого отступает слева и сверху на 40 пикселей.
Решение : смотрим на рисунок и на код. Наш блок красного цвета не должен превышать 200 на 200 пикселей и он должен иметь отступ от краёв браузера (или других блоков контента). Собственно эти отступы мы делаем через margin. Если мы делаем padding, то отступ происходит внутри нашего красного блока и отступы получаются с фоном самого блока (то есть красные).
200?"200px":""+(this.scrollHeight+5)+"px");">
текст, текст, много текста, много - много текста текста
Помимо использованных свойств (строки 6-9) есть ещё свойства margin-right, padding-right, margin-bottom, padding-bottom - они для отступов справа и снизу соответственно. Значения всех этих свойств могут быть в пикселях (px), процентах (%), либо в единицах em.
В принципе вот оно и всё. Однако есть ещё некоторые особенности работы с ними.
Особенности margin и padding
И последнее, что я хотел сказать. Не забывайте использовать сокращённые конструкции записи, например margin: 10px 0 5px 20px;. Если отступ нулевой, то ставить можно просто нолик, без указания параметров. Запомнить какой из параметров к какой границе относится очень просто - для блока отступы идут по часовой стрелке: первое число - сверху, второе - справа, третье - снизу, четвёртое - слева.
Вот собственно и всё, что я хотел рассказать сегодня. Всем счастливых выходных!
+
В этой теме Вы можете задать вопрос о материале.
В предыдущей главе мы упоминали о таких свойствах CSS, как margin (поле) и padding (отступ). Теперь мы остановимся на них более подробно и рассмотрим, чем они отличаются друг от друга и какие особенности имеют.
Создавать промежутки между элементами можно и тем, и другим способом, но если padding – это отступ от содержимого до края блока, то margin – это расстояние от одного блока до другого, межблоковое пространство. На скриншоте показан наглядный пример:
Padding отделяет содержимое от границы блока, а margin создает промежутки между блоками
Как видите, поля и отступы CSS отличаются между собой, хоть иногда без просмотра кода и нельзя определить, с помощью какого свойства задано расстояние. Это случается в тех случаях, когда отсутствует рамка или фон блока с содержимым.
Для установки полей или отступов в CSS от каждой стороны элемента существуют следующие свойства:
Отступы:
- padding-top: значение;
- padding-right: значение;
- padding-bottom: значение;
- padding-left: значение;
Поля:
- margin-top: значение;
- margin-right: значение;
- margin-bottom: значение;
- margin-left: значение;
Значения могут быть указаны в любых единицах CSS – px, em, % и т. д. Пример: margin-top: 15px .
Также существует очень удобная вещь как сокращенная запись margin и padding CSS . Если вам необходимо задать поля или отступы для всех четырех сторон элемента, совсем необязательно записывать свойство для каждой стороны по отдельности. Всё делается проще: для margin и padding можно указывать сразу 1, 2, 3 или 4 значения. От количества значений зависит, как распределяются настройки:
- 4 значения: задаются отступы для всех сторон элемента в такой последовательности: сверху, справа, снизу, слева: padding: 2px 4px 5px 10px;
- 3 значения: задается отступ сначала для верхней стороны, потом одновременно для левой и правой, а затем – для нижней: padding: 3px 6px 9px;
- 2 значения: задаются отступы сначала одновременно от верхней и нижней стороны, а затем – одновременно для левой и правой: padding: 6px 12px;
- 1 значение: задаются одинаковые отступы для всех сторон элемента: padding: 3px;
Те же правила касаются и свойства margin CSS. Обратите внимание на то, что для margin можно использовать и отрицательные значения (например, -3px), которые иногда бывают весьма полезными.
Схлопывание margin
Представьте ситуацию: два блочных элемента находятся друг над другом и им заданы поля margin. Для верхнего блока установлено значение margin: 60px , а для нижнего – margin: 30px . Логично было бы предположить, что два граничащих поля двух элементов просто соприкоснутся и в итоге промежуток между блоками будет равен 90 пикселям.
Однако дела обстоят по-другому. На самом деле в такой ситуации проявляется эффект, который называют схлопыванием, когда из двух примыкающих полей элементов выбирается наибольший по размеру. В нашем примере итоговый промежуток между элементами будет равен 60 пикселям.
Расстояние между блоками равно большему из значений
Схлопывание margin работает только для верхних и нижних полей элементов и не относится к полям с правой и левой сторон. Окончательная величина промежутка высчитывается в разных ситуациях по-разному:
- Когда оба значения margin положительные, итоговый размер поля будет равен бóльшему значению.
- Если одно из значений является отрицательным, то для вычисления размера поля нужно получить сумму значений. Например, при значениях 20px и -18px размер поля будет равен:
20 + (-18) = 20 — 18 = 2 пикселя. - Если оба значения отрицательные, сравниваются модули этих чисел и выбирается число, бóльшее по модулю (следовательно, меньшее из отрицательных чисел). Пример: необходимо сравнить значения полей -6px и -8px . Модули сравниваемых чисел равны 6 и 8 соответственно. Отсюда следует, что 6 -8 . Итоговый размер поля равен -8 пикселей.
- В случае, когда значения указаны в разных единицах CSS, они приводятся к одной, после чего сравниваются и выбирается бóльшее значение.
- Размер margin для дочерних элементов определяется еще более интересно: если у потомка поле margin больше, чем у родителя, то приоритет отдается ему. В этом случае размеры верхнего и нижнего полей родителя станут такими, как задано у потомка. При этом расстояния между родителем и потомком не будет.
Давайте посмотрим, в чем отличие margin от padding. Для этого, еще разок вспомним блоковую модель в CSS.
MARGIN (Поля) - это расстояние от границы(рамки) блока, до ближайших элементов, или, если их нет, до краев документа.
PADDING (Отступы) - как бы внутреннее расcтояние, между границей(рамкой) и содержимым блока.
Пример: создадим три стиля для трех разных параграфов, с различными значениями margin и padding и посмотрим на результат:
Т.е. значения записываются по часовой стрелке: верхнее, правое, нижнее, левое.
В каких случаях лучше пользоваться отступами, а в каких полями?
Несколько принципиальных отличий:
Отступы(padding) распологаются внутри блока, а поля(margin) - за их пределами;
Фон блока и фоновое изображение распространяются только на отступы, но не на поля. Поля всегда прозрачны, и сквозь них просвечивает фон родительского элемента.
14. Высота(height) и ширина(width) блоков
По умолчанию высота и ширина блоков определяются автоматически, т.е. чем больше текста(или другого содержимого) тем шире и выше блок.
Но, с помощью технологии CSS , можно задавать необходимую нам ширину и высоту блоков.
HEIGHT – свойство, устанавливающее высоту блока;
WIDTH – свойство, устанавливающее ширину блока;
Обычно, в качестве блоков в CSS используют элемент DIV . Однако свойство ширины и высоты можно применить и к параграфам, спискам и др.
Создадим 4 класса, и поочередно присвоим их одному и тому же боксу (в данном случае DIV ) с текстом.
Теперь фиксированная высота, а ширина растягивается по содержимому.
.box3 { width: 300px; height: 600px; border: 1px solid red; background: #FFE446; } |
Здесь фиксированная как высота, так и ширина.
.box4 { width: 300px; height: 300px; border: 1px solid red; background: #FFE446; } |
А это пример того, как будет выглядеть бокс с фиксированной шириной и высотой, если содержимое не вмещается. Текст попросту выходит за рамки блока.
Примечание!
Таким образом, указывая ширину блока, вы задаете ширину лишь той части блока, которая отведена для содержимого.