Главная » Полезные статьи » HTML-верстка » Введение в инлайновый контекст форматирования (ИКФ): основные понятия (2-я публикация цикла “Тайны CSS2.1″)
Распечатать статью

Введение в инлайновый контекст форматирования (ИКФ): основные понятия (2-я публикация цикла “Тайны CSS2.1″)

Поля, отступы и границы в инлайновом форматировании

В блочном контексте форматирования поля (margin), отступы (padding) и границы (border) могут оказывать влияние на любые координаты и расположение элемента, и так же могут влиять на окружающий контекст. Но что происходит в этом плане в инлайновом контексте? Давайте разберёмся.

Спецификация сообщает нам, что в инлайн-форматировании горизонтальные marginborder и padding между инлайн-боксами учитываются, а вот вертикальные не дают никакого эффекта и не могут влиять на окружающий контекст. Да, сразу стоит уточнить, что речь идет о инлайн-боксах, создаваемых обычными элементами с display:inline (читайте первую часть цикла), а не об инлайн-блоках или замещаемых элементах вроде картинок.

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

 

Горизонтальные поля

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

В общем, начнём с простого примера:

<p>Lorem Ipsum is simply <span>dummy text printing </span> and type setting industry. Lorem Ipsum
has been the industry's standard dummy text ever since the 1500s PageMaker including versions of Lorem Ipsum.</p>
body {font-size: 16px;}
        span {
                background: #FC3;
                margin: 500px 180px 500px 40px;
                border-radius: 5px;
        }

И вот что из этого вышло:

Значит, я выставил инлайн-элементу <span> левое поле, со значением в 40px, а правому в 180px. Что произошло? А произошло следующее. Наш элемент сместился вправо от левого инлайн-бокса (текста) ровно на 40px, а своим правым полем отодвинул следующий за ним инлайн-бокс (текст) на 180px, но так как последний попросту не поместился на эту же строку, он перескочил на новую, а на предыдущей (т.е. на той где наш элемент), в правой части теперь балом правит правый margin <span>-а.

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

Отрицательные поля

Рассмотренный до этого пример касался положительных значений свойства margin для инлайн-элементов. Но, что, например, произойдёт при отрицательных значениях? Давайте это выясним, сразу же перейдя к наглядному примеру.

<p>Lorem Ipsum is simply <span>dummy text printing </span> <em>and type setting industry.</em> Lorem Ipsum
has been the industry's standard dummy text ever since the 1500s PageMaker including versions of Lorem Ipsum.</p>
body {font-size: 16px;}
        span {
                background: #FC3;
               border-radius: 5px;
                           margin-left: -20px;
                           margin-right: -10px;
        }
                em { background: #C30; border-radius: 5px; }

И, результат:

В нашей структуре находится два инлайн-элемента<span> и <em>. Я специально поставил их рядом, чтобы вы могли лучше понять суть отрицательных margin для «инлайн-боксовых инлайнов» Жёлтенькому <span> — у я присвоил  левый отрицательный margin-left: -20px;, и сразу же правый отрицательный margin-right: -10px.

Смотрите, что произошло. При margin-left: -20px; <span> сместился влево ровно на 20px, при этом наехав своим боксом на левый текст. Отсюда можно сделать вывод, что при отрицательных левых значениях margin инлайн-элементы сдвигаются в левую сторону, наезжая на своих соседей слева. И не важно, будь то какой нибудь текст или другой элемент.
А вот при правом отрицательном margin у нас просиходит немного другой эффект. В этом случае сдвигается уже следующий за элементом инлайн-бокс, причём сдвиг происходит в левую сторону, на встречу нашему элементу. В нашем случае справа от <span> идёт инлайн-элемент <em>, и как раз таки он перемещается влево ровно на отрицательный margin <span>-а, и выходит на -10px, наезжая при этом на <span> сверху.

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

Отступы в инлайновом форматировании

Отступы, а они же padding, в инлайновом форматировании, так же как и поля (margin), не могут влиять на соседние по вертикали, но при этом у padding в отличии от margin имеется интересный эффект, о котором тоже следовало бы знать. Как обычно, рассмотрим всё на примере.

<p>Lorem Ipsum is simply dummy text printing and type setting industry. Lorem Ipsum
has been the industry's standard <span>dummy text printing</span> dummy text ever since the 1500s PageMaker
including versions of Lorem Ipsum. Text ever since the 1500s PageMaker including versions of Lorem Ipsum</p>
body {font-size: 16px;}
        span {
                background: #FC3;
               border-radius: 15px;
                           padding: 20px 50px;
        }

Ну, и конечно же, результат и изображение:

В данном примере я решил объединить сразу оба padding-а, горизонтальный и вертикальный. Но, говорить мы будем именно о последнем (вертикальном), так как горизонтальный padding всего лишь расширяет свой элемент на ширину самого padding-а и соотвественно такой инлайн-элемент становится просто шире, получая внутренние боковые отступы от своего содержимого. Такое поведение инлайн-элемента можно наблюдать на рисунке.

Но, вот на вертикальных отступах я бы хотел остановиться подробнее. Дело в том, что вертикальные padding-и с одной стороны не влияют на поведение своих соседей сверху и снизу, но с другой, могут оказать влияние на высоту и визуальный вид самого элемента. В нашем случае элемент <span> имеет в своих свойствах верхние и нижние padding-и в значении 20px. Но, несмотря на одинаковые значения, поведение этих отступов всё же немного разное. Как можно увидеть на рисунке, за счёт отступов у нашего элемента поменялась не только ширина, но и высота, а точнее у внутреннего содержимого элемента появились верхние и нижние отступы, ровно на значение padding, т.е. выходит 20px. Самое интересное здесь то, что элемент своим верхним отступом залез на своего соседа (текст) сверху, а нижним наоборот подлез под сам текст снизу. Т.е., по сути, вышло, что в вертикальном контексте сам элемент остался на месте, но вот его внутренние отступы заставили его сменить высоту и налезть над и под своих соседей.

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

Границы в инлайновом форматировании

Границы (border) в инлайновом форматировании работают практически так же, как и padding. Но несмотря на их похожесть, я всё-таки решил сделать тестовый примерчик для наглядности.

<p>Lorem Ipsum is simply dummy text printing and type setting industry. Lorem Ipsum
has been the industry's standard <span>dummy text printing</span> dummy text ever since the 1500s PageMaker
including versions of Lorem Ipsum. Text ever since the 1500s PageMaker including versions of Lorem Ipsum</p>
body {font-size: 16px;}
        span {
                background: #FC3;
                border-radius: 15px;
                border: 20px solid red;
        }

И, конечно же, результат:

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

Разрыв инлайн-бокса

На самом деле на примере границ и фона я хотел бы показать вам ещё одну очень важную особенность в поведении инлайн-боксов. А точнее, в их разрыве в случаях когда они не умещаются в один лайн-бокс. Чтобы было понятно, о чём идёт речь, предоставлю код и изображение.

<p>Lorem Ipsum is simply dummy text printing and type setting industry. Lorem Ipsum
has been the <span>industry's standard dummy
text printing</span> dummy text ever since the 1500s PageMaker
including versions of Lorem Ipsum. Text ever since the 1500s
PageMaker including versions of Lorem Ipsum</p>
body {font-size: 16px; margin: 0;}
        span {
                background: rgba(160,224,160,1);
                padding: .5em;
                border: 2px dotted #caa;
                border-radius: 1em;
        }

А вот и сам результат и изображение:

В общем ситуация следующая. В параграфе находится всё тот же <span>, но теперь я решил сделать его длинее, чтобы он не поместился на свою полочку (лайн-бокс). Каждая строка – это отдельный лайн-бокс, а наш инлайн-бокс (<span>) слишком длинный, и поэтому при столкновении с правой границей лайн-бокса его попросту разорвало на две части и та часть, которая не поместилась на текущей строке, перескочила на новую.

Но, постойте, выходит, что у нас теперь в двух лайн-боксах один и тот же инлайн-бокс? – Нет. Дело в том, что если инлайновый бокс не вмещается в свой контейнер и при этом перенос строки не запрещен правилами языка и white-space:nowrap/pre, то такой бокс разрывается на две части, и образует уже две половинки бокса. Но, суть в том, что обе половинки внутри бокса ведут себя по-обычному и никаких особых правил к ним не применяется и мало того, обе части встраиваются в свои лайн-боксы точно так же, как если бы это были два разных инлайн-бокса. Просто заканчивается один лайн-бокс, а за ним начинается другой, первым элементом в котором становится новый инлайн-бокс, содержащий тот текст, что не поместился в первой строке, и имеющий те же CSS-стили.
Да, важная деталь. padding, margin и border не применяются к месту разрыва, и поэтому в конце разорвавшегося инлайн-бокса и в начале нового можно считать значения этих свойств равными нулю.

Для некоторых такое поведение может показаться странным и даже удивительным, но, на самом деле здесь всё вполне логично. Представьте себе, что у вас в строке находится элемент и вы задаёте ему стили: фон, границы, поля. И вдруг он не помещается в один лайн-бокс, рвётся, последняя часть перескакивает на другую строчку и у вашего элемента становится, например, не две боковых границы, а целых четыре. А вот это уже и правда странно, не правда ли? Поэтому не удивляйтесь, а примите это как правильность.

Источник:  css-live.ru

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи