Не пропусти
Главная » Интернет новичку » Padding, Margin и Border

Padding, Margin и Border

>

Padding, Margin и Border — задаем в CSS внутренние и внешние отступы, а так же рамкидля все сторон (top, bottom, left, right)

Здравствуйте, уважаемые читатели блога Сегодня я хочу продолжить тему изучения CSS (каскадных таблиц стилей) и рассмотреть те стилевые правила, которые позволяют задать отступы и границы для Html элементов: border, margin и padding.

До этого мы успели изучить довольно-таки простые свойства, которые управляли шрифтами (Font Weight, Family, Size, Style), текстом (text-decoration, vertical-align, text-align) и рассмотрели модель формирования фона в CSS через background.

Padding, Margin и Border

Да, еще мы и принципы использования селекторов успели рассмотреть во всех подробностях (растянувшихся на несколько статей). Теперь пора переходить к правилам, которые составляют основу построения документов (вебстраниц), и начнем мы именно с блочной модели (взаимоотношения Html элементов).

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

Блочная модель в CSS — padding, margin и border

Для браузера Firefox есть замечательный плагин под названием Фаербаг, о котором я уже довольно давно и подробно писал.

При просмотре информации о любом Html теге веб страницы, этот плагин на вкладке «Макет» позволяет увидеть очень наглядное представление отступов и границ данного элемента относительно родительского и тех тегов (или же содержимого), которые заключены внутри оного (матрешка такая получается):



Padding, Margin и Border

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

Если начинать рассматривать эту матрешку изнутри, начиная с содержимого, то дальше идет область внутреннего отступа от этого содержимого до рамки этого тега. Размер области задается с помощью CSS правила Padding, а ширину рамки можно задать с помощью Border.

Следуя из центра к периферии, мы после рамки должны будем задать область внешнего отступа с помощью Margin. Оно позволяет регулировать взаимоотношения с границами других блоками. Например, с помощью задания отрицательных отступов в CSS правиле мерджин, можно добиваться наложения одних блоков веб страницы на другие соседние блоки этой же страницы.

Сразу оговорюсь, что вы можете задавать Padding и Margin, а также размеры рамки Border отдельно для каждой из сторон блока (прямоугольной области), которые определяются как:

Padding, Margin и Border

Ну и для примера посмотрим, что именно будут обозначать border, margin и padding применительно к каким-то конкретным сторонам блочной модели:



Padding, Margin и Border

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

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

Padding, Margin и Border

Получилось слегка запутано, но так оно всегда бывает поначалу. Со временем у вас все в голове устаканится и блочная модель примет ясные и стройные очертания. Иначе и быть не может.

Margin (top, bottom, left, right) — внешние отступы в CSS

Давайте начнем рассмотрение CSS свойств для задания отступов и границ с Margin. Понятно, что это правило может быть написано отдельно для каждой из сторон блочной модели и в нем допустимо использовать следующие значения:

Padding, Margin и Border

Наш элемент, для которого мы прописывает данное правило, взаимодействует с границами своего контейнера и с границами соседних блоков, которые в коде расположены рядом с ним. Соответственно, существуют четыре CSS правила для каждой из имеющихся границ: margin-top,right, bottom и left. Что можно использовать в качестве значений для них?



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

Во-вторых, в качестве значений для margin-top, right, bottom и left можно использовать размерные величины Em, Ex или Px.

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

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

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



Padding, Margin и Border

Т.е. перечисление начинается с верхнего (top) и продолжается по часовой стрелке вплоть до завершения круга правым отступом (right). Выглядеть это может примерно так:

И это будет означать, что браузер сверху от нашего блока должен сделать отступ в 20 пикселей, справа — в 10, снизу — в 40, а слева — в 30. Т.е. эта запись будет эквивалентна такой:

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

  1. Если величины внешних отступов слева и справа будет одинаковыми, например, так:

То последнее можно будет опустить:

Эти две записи сборного правила делают одно и то же. Поэтому, если вы видите запись с тремя величинами в Margin, то величину четвертого (справа) можно будет подсмотреть во втором (слева).

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

или, что то же самое (в силу пункта 1):

То такое сборное правило можно записать всего с двумя значениями, отбросив последнее, которое совпадает с первым:

В этом случае первая величина описывает внешние отступы по вертикали, а вторая — по горизонтали.

  • Ну и, наконец, если все значения в сборном правиле будут одинаковыми:

    или, что то же самое (в силу пункта 2):

    То можно будет использовать максимально сокращенный тип записи (отбросив последнее значение совпадающее с первым):

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



  • Говоря про внешние отступы, стоит упомянуть про такую схему как «Margin-colloapse» или, по другому, «схлопывание марджинов». В двух словах суть этого явления заключается в следующем.

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

    Например, если для верхнего блока задано следующее:

    То нижний марджин верхнего блока (200px) поглотит в себе верхний марджин нижнего (100px, да и даже если он станет равен 199px ничего не изменится) и результирующий внешний отступ между этими двумя блоками все равно будет равен 200px. Т.е. в расчет принимается только лишь больший по модулю Margin, и он никак не складывается со встречным значением соседнего по вертикали элемента.

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

    Например, в этом случае:

    Результирующий отступ между блоками будет равен -10px, т.е. нижний на 10px наедет на верхний Html элемент.

    Еще одной особенностью использования правила Margin в CSS является то, что прописанное значение по вертикали для строчных элементов игнорируется. Задав:



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

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

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

    Ну и рамка (Border), а точнее ее ширина, тоже не сможет отодвинуть по вертикали от строчного тега другие соседние блоки. Для строчных элементов движуха возможна только в одном направлении — по горизонтали и все.

    Padding и border — внутренние отступы и рамки

    Давайте теперь перейдем к заданию внутренних отступов с помощью правила Padding и посмотрим, какие именно значения оно может принимать:

    Padding, Margin и Border

    Как вы можете видеть, тут нет упоминания Auto, а также это CSS правило не допускает использование отрицательных значений (они могут быть только положительными — от нуля и выше). Т.е. с помощью Padding контент за пределы рамки выдвинуть никак не получится. Максимум что можно сделать, это контент вплотную приблизить к рамке.

    Проценты в нем считаются точно так же, как в Margin — относительно ширины контейнера (области контента родительского элемента), в котором заключен наш элемент. Сборное правило Padding в Css формируется и подчиняется тем же законам, что и рассмотренное чуть выше:



    Padding, Margin и Border

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

    И последнее, что сегодня я хотел бы рассмотреть — это рамки, которые задаются с помощью Border. У них есть три типа параметров:

    1. Border-width — задает толщину рамки
    2. Border-color — задает ее цвет
    3. Border-style — тип рамки или же тип линии, которой она будет отрисована

    У всех этих трех CSS правил имеется допустимый набор значений:

    Padding, Margin и Border

    Ширина линии для рамки (Border-width) может задаваться как с помощью цифр в Em, Ex или Px, так и словами:

    1. Thin — тонкая линия;
    2. Medium — средняя (данное значение используется по умолчанию);
    3. Thick — толстая.

    В качестве значения для цвета рамки (Border-color) можно использовать принятые для цветов в Html способы их задания (шестнадцатеричный код, слова и т.д.):

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



    CSS свойство Border-style позволяет задать словами тип рамки:

    1. None — без рамки (используется по умолчанию)
    2. Dotted — линия отрисовывается точками
    3. Dashed — пунктиром
    4. Solid — сплошной линией
    5. Double — двойной линией
    6. Groove — вдавленная рамка
    7. Ridge — выпирающая
    8. Inset и outset — игры с тенью

    Естественно, что раз есть четыре стороны любого блока, то можно использовать как общие правила, так и отдельные для каждой из сторон:

    Padding, Margin и Border

    Тоже самое будет касаться и сборного правила Border — оно может быть прописано как для всех сторон одновременно (Border), так и для каждой из сторон в отдельности (Border-top, left, bottom и right). Порядок следования значений не важен:

    Padding, Margin и Border

    Если что-то пропустить, то вместо него будет использоваться значение по умолчанию.

    Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

    Подборки по теме:

    Комментарии и отзывы

    Спасибо за Вашу работу по обучению нас — ламеров бложного и форумного дела. Не так давно начал читать Ваш ПРОЕКТ и применять многие Ваши советы на деле. Результат — видимый (внешний) Вы сами можете увидеть �� Скрытый — рост посетителей моего проекта, медленный, но верный рост.



    Теперь по теме. Установил на блоге WordPress в виджетах справа контактную форму Contact Form 7. Всё хорошо. Всё работает. Но! Полазив по интернету нашел как изменить ширину полей, таких как имя, мейл и тема, так, чтобы они вписывались в мою тему. Но никак не могу заставить поле для текста стать нужной ширины. Я так понимаю этот вопрос как раз где-то в поле этого поста?! Адрес блога http://ProjectorMan.ru. Если забаните комментарий за ссылку, ответьте, если можно в почту.

    Зураб Проверь все ли файлы ушли на сервер при загрузки по FTP. Возможно просто некий *.css просто не передался. ��

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

    располагает элемент по середине, а

    margin: 20px 20px 20px auto;

    действует на подобии text-align: right; только круче. . с ним можно указывать отступ от края. Вот что я имею ввиду — http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#m-auto

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

    Поскажите пожалуйста как прописать код для отступа сверху в joomla 3.0/

    В модуле html! Тоесть у меня есть ссылки на какой либо материал но при этом именно в этом модуле отступа нету! Заранее спасибо

    * Нажимая на кнопку «Добавить комментарий» или «Подписаться» Вы соглашаетесь с политикой конфиденциальности.

    О admin

    x

    Check Also

    Что такое фиаско, а также что означает фраза

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

    Что такое респект и что значит это слово при общении в интернете, создание, продвижение и заработок на сайте

    > Что такое респект и что значит это слово при общении в интернете Здравствуйте, уважаемые читатели блога Давайте продолжим разбирать наиболее часто употребляемые интернет-мемы (специфические, присущие в основном только этой ...

    Что такое рерайт (рерайтинг) и с чем его едят, создание, продвижение и заработок на сайте

    > Что такое рерайт (рерайтинг) и с чем его едят? Здравствуйте, уважаемые читатели блога Если у вас есть сайт, либо вы планируете им обзавестись, то, конечно же, вы слышали слово ...

    Что такое репост и как делать репосты во ВКонтакте, создание, продвижение и заработок на сайте

    > Что такое репост и как делать репосты во ВКонтакте? Здравствуйте, уважаемые читатели блога Согласно официальному определению, репост – это возможность мгновенно поделиться информационной заметкой, размещённой в соцсетях, при этом ...

    Что такое кэш

    > Что такое кэш — как очистить кеш в Опере, Мозиле, Хроме и других браузерах Здравствуйте, уважаемые читатели блога Что такое кэш? Это на самом деле довольно простое и в ...

    Что такое интернет, кто создал всемирную паутину World Wide Web и как работает глобальная сеть, создание, продвижение и заработок на сайте

    > Что такое интернет, кто создал всемирную паутину World Wide Web и как работает глобальная сеть Здравствуйте, уважаемые читатели блога Все мы с вами живем в эпоху глобального интернета и ...

    Что такое Емайл (E-mail) и почему это называют электронной почтой, создание, продвижение и заработок на сайте

    > Что такое Емайл (E-mail) и почему это называют электронной почтой Здравствуйте, уважаемые читатели блога Все когда-то начинают, поэтому вопрос о том, что такое Емейл и какое он имеет отношение ...

    Что такое дроп, дропнутый или освобождающийся домен, создание, продвижение и заработок на сайте

    > Что такое дроп, дропнутый или освобождающийся домен Здравствуйте, уважаемые читатели блога Термин Дроп происходит от английского слова Drop, которое, если верить автоматическому переводчику Google, имеет довольно большое количество значений ...

    Что такое домены, хостинг, DNS сервера и IP адреса, создание, продвижение и заработок на сайте

    > Что такое домены, хостинг, DNS сервера и IP адреса Домены, Ip адреса и связывающие их DNS сервера Что такое доменные имена и какие бывают домены Покупка и продление доменов ...

    Что такое девайс и чем он отличается от гаджета, создание, продвижение и заработок на сайте

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

    Что такое блог и как его создать на бесплатном движке WordPress, оптимизация и заработок на своем интернет-дневнике, создание, продвижение и заработок на сайте

    > Что такое блог и как его создать на бесплатном движке WordPress, оптимизация и заработок на своем интернет-дневнике Здравствуйте, уважаемые читатели Сегодня статья начнется с того, что мы попробуем дать ...

    Что такое анонимайзеры (Хамелеон, Spools) или как скрыть IP адрес для входа в ВКонтакте, Одноклассники, Ютуб и другие сайты, создание, продвижение и заработок на сайте

    > Что такое анонимайзеры (Хамелеон, Spools) или как скрыть IP адрес для входа в ВКонтакте, Одноклассники, Ютуб и другие сайты Здравствуйте, уважаемые читатели блога Прежде чем рассматривать случаи использования анонимайзеров, ...

    Что такое URL адреса, чем отличаются абсолютные и относительные ссылки для сайта, создание, продвижение и заработок на сайте

    > Что такое URL адреса, чем отличаются абсолютные и относительные ссылки для сайта Здравствуйте, уважаемые читатели блога Сегодня хочу затронуть тему формирования уникальных URL адресов в интернете и рассказать про ...

    Что такое RSS, где скачать иконки и какая читалка самая лучшая, создание, продвижение и заработок на сайте

    > Что такое RSS, где скачать иконки и какая читалка самая лучшая Здравствуйте, уважаемые читатели блога Эта статья будет посвящена вопросу — что такое RSS и почему его в обязательном ...

    Что такое Rookee и как продвигать сайт в этой системе, создание, продвижение и заработок на сайте

    > Что такое Rookee и как продвигать сайт в этой системе? Здравствуйте, уважаемые читатели блога Я уже писал про некоторые сервисы помогающие продвигать сайты в автоматическом режиме — Сеопульт, SeoWisard, ...

    Что такое Joomla, создание, продвижение и заработок на сайте

    > Что такое Joomla Свое изучение сайтостроения я начал именно с выяснения вопроса: Что такое Joomla и как она может помочь мне в создании сайтов). Если не считать небольшого опыта ...

    Что такое ICQ, как его установить и пользоваться, создание, продвижение и заработок на сайте

    > Что такое ICQ, как его установить и пользоваться? Здравствуйте, уважаемые читатели блога Не будем расписывать историю возникновения ICQ еще с начала времен его разработки — это не представляет особого ...

    Что такое DNS и как ДНС-сервера обеспечивают работу интернета, создание, продвижение и заработок на сайте

    > Что такое DNS и как ДНС-сервера обеспечивают работу интернета Здравствуйте, уважаемые читатели блога О том, что такое интернет и когда он появился, мы с вам уже говорили. Говорили и ...

    Что такое cookie и как почистить куки в современных браузерах, создание, продвижение и заработок на сайте

    > Что такое cookie и как почистить куки в современных браузерах Здравствуйте, уважаемые читатели блога Практически сразу любой начинающий интернетчик сталкивается с таким понятием как cookie. Что означает это загадочное ...

    Что такое Chmod, какие права доступа назначать файлам и папкам (777, 755, 666) и как это сделать через PHP, создание, продвижение и заработок на сайте

    > Что такое Chmod, какие права доступа назначать файлам и папкам (777, 755, 666) и как это сделать через PHP Сегодня я хотел бы поговорить о правах доступа к файлам ...

    Что мешает SEO-продвижению вашего сайта и как это исправить

    > Что мешает SEO-продвижению вашего сайта и как это исправить — 10 основных ошибок и 5 базовых рекомендаций Здравствуйте, уважаемые читатели блога Сегодня хочу выступить в роли адвоката Сео методов ...

    Рейтинг@Mail.ru