Отрицательные отступы — путь к универсальности / Habr

Я часто сталкиваюсь с ситуацией, когда в череде блоков с одинаковыми отступами и общим контейнером, у первого или последнего блока нет отступа или он отличается от остальных. Какое–то время для решения этой «проблемы» я использовал «костыли», вроде классов first или last, пока не освоил технику работы с отрицательными отступами.


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

Для примера я постарался подобрать наиболее сложную ситуацию. В данном случае нам надо нейтрализовать не только отступ сверху у первого ряда, но и отступ слева у первой колонки, при этом уместив блоки в контейнере div аккуратно в три колонки.

HTML:

  1. <div>
  2.    <ul>
  3.       <li>Блок 1</li>
  4.       <li>Блок 2</li>
  5.       <li>Блок 3</li>
  6.       <li>Блок 4</li>
  7.       <li>Блок 5</li>
  8.       <li>Блок 6</li>
  9.       <li>Блок 7</li>
  10.       <li>Блок 8</li>
  11.    </ul>
  12. </div>
CSS:

  1. div {
  2.    border: 2px solid #CCC;
  3.    overflow: hidden;
  4.    width: 640px;
  5.    }
  6. ul {
  7.    margin: -20px 0 0 -20px;
  8.    overflow: hidden;
  9.    padding: 0;
  10.    }
  11. ul li {
  12.    background: #C06;
  13.    float: left;
  14.    height: 100px;
  15.    list-style: none;
  16.    margin: 20px 0 0 20px;
  17.    width: 200px;
  18.    }
  19. *html ul {
  20.    width: 660px;
  21.    }
  22. *html ul li {
  23.    display: inline;
  24.    }

Задача решена и теперь давайте заострим внимание на основных моментах. Центральный момент — это отрицательные значения свойства margin для тега ul, и свойство overflow со значением hidden для тега div. С их помощью мы сдвигаем блок ul относительно блока div за пределы его границы на 20px вверх и влево, а при помощи overflow отсекаем ненужные нам отступы. В этих двух свойствах и заключается суть метода.

Но как всегда есть одно «но» или даже три, это свойство overflow для тега ul и два отдельных свойства для браузера IE 6.0. Первое свойство применяется для нейтрализации действия свойства float на родительский блок. А для IE 6.0 я отдельно использовал свойство width для блока ul, так как IE не может посчитать её сам относительно дочерних блоков, и свойство display, чтобы устранить удвоение отступов, когда к блоку применяется свойство float.

Представленный пример был протестирован в браузерах: IE 6.0+, Firefox 2.0, Opera 9.0, Safari 2.0+. Еще раз хочу сказать, что эта техника универсальна и может применяться повсеместно, где это необходимо, в различных вариациях. Экспериментируйте и делитесь опытом 🙂

Пример

habr.com

Отрицательный margin в нормальном потоке – Zencoder

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

Создадим простой пример и для этого предположим, что у нас есть страница, на которой элемент после заголовка всегда должен находиться непосредственно под ним. Самый распространенный пример из практики для этого случая, когда первый параграф, идущий сразу же после заголовка, не имеет пустого пространства (blank line) между собой и этим параграфом.

Решения такого вопроса два.

Первый способ — это воспользоваться смежными селекторами.

Второй способ, представленный на рисунке ниже, это применить отрицательный для :

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

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

Такой прием полезен на практике в случае, когда необходимо расположить часть контента “на одной линии”. Почему слово на одной линии заключено в кавычки — потому-что контент только визуально располагается на одной линии.

Предположим, у нас есть список (HTML-разметка):

<ul>
  <li>
    <a href="#">Salaries</a>
  </li>
  <li>
    <a href="#">Punching the Clock</a>
  </li>
</ul>

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

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

Но можно решить такую задачу другим способом:

.jump{
  list-style-type: none;
  line-height: 1;
  width: 25em;
  margin: 0 auto;
  padding: .25em 1em;
  border: 1px solid;
}
  .jump .next{
    text-align: right;
    margin-top: -1em;
  }

В этом примере отрицательный величиной в “поднимает” элемент вверх ровно на высоту строки, установленную нами ранее в правиле .

Прим. переводчика: очень понравилось, о таком способе решения даже не подозревал!

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

HTML-разметка такого заголовка будет следующей:

<div>
  <h3>
    The Web Stack
  </h3>
    ...
</div>
.entry{
    border-top: 1px solid gray;
  }
  .entry h3{
    width: 80%;
    background-color: #fff;
    border: 1px solid gray;
    margin: -0.67em auto 0;
    text-align: center;
  }

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

HTML-разметка, в которой добавлен еще один элемент — :

<div>
  <h3>
    <span>The Web Stack</span>
  </h3>
    ...
</div>
.entry h3{
    margin-top: -0.67em;
    text-align: center;
    border-top: 1px solid gray;
  }
  .entry h3 span{
    background-color: #fff;
    border: 1px solid gray;
    padding: .25em 1em;
  }

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

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

Автор статьи: Eric Meyer — “Smashing CSS Professional Techniques for Modern Layout”

На этом все.


negative margincss

gearmobile.github.io

Поговорим о margin, он же маргин( часть 1-я ) / Habr

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

Начинающим верстальщикам она точно будет полезна, а вот профессионалам — сомневаюсь, так как человек занимающийся не первый год версткой уже обязан «вызубрить» наизусть все особенности данного свойства.

В этой части статьи я напишу о вертикальном маргине. О горизонтальном поговорим в следующей части.


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

Cm, mm, inch, pc, pt – абсолютные единицы измерения. Рекомендуется использовать при печати документов.

Px, em, ex, % — относительные единицы, используются для мониторов.

Для маргина, я использую px и %, а em – для указания размеров шрифта. Ex( в IE ex = em / 2 ) – использовать не рекомендую, т.к в каждом броузере интерпретируется по-разному.

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

Область просмотра – то, на чем пользователь видит содержимое сайта, не прокручивая при этом экран. У каждого пользователя она разная.

Каждый верстальщик знает, что любой элемент можно представить в виде 4 областей( маргин, бордер, паддинг и контент ).


Маргин – внешний отступ. По вертикали и горизонтали построение маргин разные.

Как я уже писал выше, размеры для маргина могут проставляться в em, ex, px – жесткое задавание и в % — считаются относительно какой-то области.

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

Есть 2 дива: first и внем див second.

#first{

padding: 100px;

background: #b5bcbc;

}

#second{

height: 100px;

background: #b06b48;

margin: 30% 0 0;

}


Прошу обратить внимание что свойство width я не задал ни одному диву(об этом поговорим позже). Сейчас нас интересует только маргин, который равен margin: 30% 0 0;

Я надеюсь, что все знают, как считается маргин в данном случае, на всякий случай напомню, что считается по часовой стрелке, тоесть: сверху отступ будет 30%, справа — 0, снизу — 0 и слева, — так как я ничего не указал, то маргин принимает значение противоположной стороны, тоесть в данном случает, если маргин справа равен 0, то маргин слева, если не указан, тоже равен 0.

Но сейчас нас интересует маргин, который равен 30%, он же отступ сверху. Откуда же берутся эти 30%?

Многие считают и считают неверно, что 30% берутся от верхней части всей страницы.


Но это неверно!

Так как в данном случае, див second вложен в див first, то margin-top:30% будет считаться относительно ширины родительского дива second, тоесть относительно ширины дива first!


В данном случае ширина дива first по умолчанию авто, поэтому див принимает все свободное пространство по ширине, а из этой ширины будут высчитываться 30% маргин-топ для дива second.

При уменьшении родительского дива, будет и уменьшаться отступ сверху у дива second.

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

Например: два дива, лежащие один под другим.


если мы добавим первому диву margin-bottom: -100px, а второму margin-top: -50px
#first{

height: 200px;

background: #69c;

margin: 0 0 -100px;

}

#second{

height: 200px;

background: #f60;

margin: -50px 100px 0;

}


то произойдет следующее.


Но… тут и наступает большая ошибка новичков.

Многие думают, что так как верхний див имеет маргин-боттом -100px, а нижний див, маргин-топ -50px, то нижний див «заедет» на верхний на -150px.

Ошибка!

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


В данном случае нижний див «заедет» на верхний див на 100px, а 50px учитываться не будут.

Тоже самое верно и для положительных маргинов, нижний див «уедет» от верхнего на 100px, а 50px учитываться не будут.

Рассмотрим следующий пример.

Есть 2 дива, один под другим.

#first{

height: 200px;

background: #69c;

margin: 0 0 -100px;

}

#second{

height: 200px;

background: #f60;

margin: 50px 100px 0;

}

first

second


Как видите маргин-боттом первого — отрицательный, а маргин-топ второго — положительный, что произойдет в данной ситуации?

Для разноименных маргинов произойдет сложение, тоесть: -100 + 50 = -50. Соответственно нижний див поднимиться на 50px вверх.

Едем далее.

Два дива, один вложен в другой.

#first{

background: #b5bcbc;

}

#second{

height: 200px;

background: #b06b48;

}


Если в цсс добавить внутреннему диву маргин-топ 200px,
#second{

height: 200px;

background: #b06b48;
margin-top: 200px;

}

То, вот тут то и очередная ошибка! Некоторые считают, что внутренний маргин, должен «отодвинуться» от своего родителя на 200px вниз а его родитель останется на месте, и тем самым растянется.


Но, как бы не так!

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

И результат


Но, как быть, если нам это не нужно и мы хотим, чтобы див-родитель остался на своем месте, а див-ребенок отодвинулся на 200px вниз?

Можно отменить это действие по отношению к родителю, есть несколько способов.

1. задавание padding родительскому блоку

2. задавание border родительскому блоку

3. задавание overflow родительскому блоку, любое значение кроме visible( работает везде, кроме старых ИЕ )

И вуаля


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

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

habr.com

Почему отрицательный margin не работает? — Хабр Q&A

Dubrovin,
0. вы сначала пишите, что вам нужна сетка с фиксированными элементами, а затем скидываете пример с резиновыми элементами. Ваши элементы больше не фиксированные, так как вы добавили flex-grow. Не надо так. Учитесь точно формулировать требования.
1. По поводу сетки без медиазапросов. Я вам написал выше, что в таком случае медиазапросы ставят на контейнер. В противном случае при схлопывании сетки, она будет уже остального контента на странице. Что в большинстве случаев не должно происходить.
Решайте задачи опираясь на реальные кейсы.
2. Само решение с overflow: hidden — грубейший и нелепейший костыль. Попробуйте добавьте в элементы своей сетки dropdown или всплывающий tooltip и везде где они будут выходить за край сетки, они будут скрыты за overflow.
3. Ваша навязчивое желание уложиться 1кб в 2018 году не несет под собой никаких объективных плюсов. Надуманные предрассудки и экономия на спичках.
4. Если у вас не работают готовые решения, написанные профессионалами и прошедшие проверку временем, вывод напрашивается только один, вы не умеете их использовать.
5. Нижний margin в верстке сетки не костыль, в отличии от отрицательного.
6. Я вам своего решения не предлагал, разве скидывал фидл с простым и изящным решением, на случай если не нужна сетка и отрывок кода из Twitter Bootstrap 4. Если вы думаете, что вы лучший программист, чем команда Twitter, то вы очень сильно ошибаетесь.
Если вы в их решении замените padding на margin, то вся ваша верстка рассыпется. Лучше попробуйте детально разобрать их решение, посмотреть на бесчисленные кейсы применения и подумать, почему их универсальная сетка получилась именно такой какая она есть. Очень развивает.
7. Мы в компании как раз не используем готовых решений. Не используем по той простой причине, что умеем верстать и проектируем компоненты исходя из реальных задач, а проекты у нас большие и долгосрочные. Вам же я рекомендую не изобретать велосипеды и отталкиваться от решений профессионалов, так как, насколько я вижу, вы и верстаете плохо и опыта у вас, видимо, совсем нет, так как в ваших попытках найти решение уже промелькнула целая куча грубых костылей, которые дали бы о себе знать при попытке такое решение использовать.

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

toster.ru

Организация отступов в верстке (margin/padding) / Habr

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

Ниже перечисленные принципы выполняются в среде позиционирования элементов на странице. В элементах декора тоже выполняются. Но не так категорично.

Основные принципы:

  1. Отступы идут от предыдущего элемента к следующему.
  2. Отступ задается последнему возможному элементу в доме.
  3. Отступы нельзя задавать для независимых элементов ( БЭМ блок ).
  4. У последнего элемента группы, отступ обнуляется (всегда).

Отступы идут от предыдущего элемента к следующему.

margin(ы) задаются от предыдущего элемента к следующему, от первого ко второму, сверху вниз, слева направо.

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

Отступы идут в направлении потока дом дерева, блок сам себя не толкает.

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

Отступ задается последнему возможному элементу в доме

margin(ы) задаюся только между соседними элементами дом дерева.

В примере 3 списка, в следующей структуре:

<section>
  <div>
    <div>
      <ul>
        <li><a href="">Далеко-далеко, за словесными.</a></li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
  </div>

  <div>...</div>

  <div>...</div>
</section>

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

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

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


<section>
  <h2>headline in a section of seven words</h2>
</section>

Если взять пример с заголовком, и нужно сделать отступ для заголовка сверху. то последний элементом будет section и для него задается padding-top, margin(ы) которые стоят по дефолту всегда нужно обнулять.

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

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

Отступы нельзя задавать для независимых элементов ( БЭМ блок )

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

Если нужно сделать блоку отступ. Без ущерба это делается с помощью:

  • Наследование через элемент (если вытащить этот блок с элемента, отступа не будет, и его можно будет просто разместить в другом месте).
  • Добавление класса (можно сделать блок элементом).
  • Обертка (как блок, у которого роль, только в позиционировании).
.block__item > .block { margin-right: 10px; }

.block.block__item { margin-right: 10px; }

.block-wrap > .block { margin-right: 10px; }

У последнего элемента группы, отступ обнуляется (всегда)

Возьмем для примера список и изображение.

<ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

<img src="" alt="">

Это горизонтальное меню и логотип (который почему-то справа).

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

Для последней li отступ обнуляется. И отступ делается между соседними элементами ul и img. О чем говорилось во втором принципе.

Возьмем другой пример:

<aside>
  <div>
    <article>
      <h4>...</h4>
      
      <p>...</p>
      
      <aside>
        <time>10.10.10</time>
      </aside>
    </article>
  </div>

  <div>...</div>
  
  <div>...</div>
</aside>

Интересует нас отступ между новостями, которые задается .blog-preview__item { margin-bottom: 20px; }. Последний margin обнуляется, а нижний отступ делается за счет padding blog-preview. О чем говорилось во втором принципе.

Чаще чем другие псевдоклассы, надо использовать :last-child.

.item:not(:last-child) { 
  margin-bottom: 20px; 
}

// или //

.item {
  // другие стили //
  margin-bottom: 20px; 

  &:last-child {
    margin-bottom: 0;
  }
}

// или margin-top, основная идея здесь, не в направлении маргина, а в отсутствии лишнего //

.item + .item {
  margin-top: 20px;
}

// или //

.item {
  // другие стили //

  & + & {
    margin-top: 20px;
  }
}

Исключения

  • В первую очередь это добавление текстового контента через админку. Здесь отлично справляется подход к отступам заданный браузером. Но этот подход нельзя считать подходящим в обычной верстке как и несколько <br> в коде подряд.
  • «Динамические элементы». Когда элемент появляется после какого-то блока, то он появится со своим отступом.
  • Иногда вертикальные падинги лучше задавать дочерним блокам, нежели всей секции. Если в перспективе, на других страницах в том же месте, это относится ко второму принципу, задавать отступ для последнего возможного, вот иногда секция последний, но не возможный.
  • Отрицательные маргины, auto, padding для контейнера.


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

P. S. Советую ознакомиться с публикацией Кастомный подход для нормализации и сброса стилей (custom-reset.css). И советую использовать css линтеры. И кому интересно, может решить css задачку.

habr.com

margin | CSS справочник

Поддержка браузерами



12.0+ 6.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство margin определяет расстояние по вертикали и/или горизонтали (его также называют «внешний отступ» или «поле») от внешнего края рамки текущего элемента до внутренней границы родительского элемента или до внешнего края элемента, который расположен рядом с текущим элементом.

описание CSS свойства margin

Свойство margin обеспечивает краткий метод установки значений сразу нескольких свойств внешнего отступа в одном объявлении. Оно может содержать от одного до четырех значений, разделяемых между собой пробелами. Если указывается более одного значения, внешний отступ устанавливается начиная с верхней позиции:

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

Визуальный эффект будет зависеть от количества заданных значений:


  • margin:10px 5px 15px 20px;

    • Верхнее поле — 10px
    • Правое поле — 5px
    • Нижнее поле — 15px
    • Левое поле — 20px

  • margin:10px 5px 15px;

    • Верхнее поле — 10px
    • Правое и левое поле — 5px
    • Нижнее поле — 15px

  • margin:10px 5px;

    • Верхнее и нижнее поле — 10px
    • Правое и левое поле — 5px

  • margin:10px;

    • Все 4 поля по 10px

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

Объединение вертикальных полей

  1. Поля сестринских элементов расположенных друг под другом и находящихся в потоке документа объединяются в одно общее. Высота полученного поля равняется высоте большего из двух полей, например: поле верхнего элемента (margin-bottom) составляет 10px, а нижнего элемента (margin-top) — 20px, единое поле в этом случае будет высотой 20px.
  2. Объединение полей родительского и дочернего элемента находящихся в потоке документа происходит, если родительский элемент не имеет ничего из того, что могло бы отделять его внешний отступ от внешнего отступа дочернего элемента (рамки, внутреннего отступа или строчного содержимого). Также объединение полей не будет происходить, если родительскому элементу установить свойство overflow со значением hidden или auto. Плюс от этого способа заключается в том, что размер родительского элемента не увеличивается.

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

Примечание: допускаются отрицательные значения полей.







Значение по умолчанию: 0
Применяется: ко всем элементам, за исключением тех элементов, которые относятся к типу display: table-*, кроме table-caption, table и inline-table. Дополнительно: значения относящиеся к margin-top и margin-bottom не применяются к строчным элементам.
Анимируется: да
Наследуется: нет
Версия: CSS1
Синтаксис JavaScript: object.style.margin=»10px 5px»

Синтаксис

margin: величина|auto|inherit;

Значения свойства






Значение Описание
auto для вертикальных отступов вычисляется как 0. При использовании для горизонтальных отступов следует учитывать следующие моменты:

  • данное значение применяется только к блочным элементам, которые имеют фиксированную ширину
  • при использовании значения auto, элемент сдвигается полностью влево или вправо, если значение одновременно установлено для отступа слева и справа, элемент будет центрирован по горизонтали.
величина Указывает размер поля в единицах измерения, используемых в CSS.
% Величина, указанная в процентах, вычисляется в зависимости от ширины области содержимого родительского элемента.
inherit Указывает, что значение наследуется от родительского элемента.

Пример


div#myBox {
background-color: red;
margin: auto;
}

puzzleweb.ru

Свойство margin | Учебные курсы

Свойство margin устанавливает пустое пространство от внешнего края border, padding или содержимого блока (рис. 1). Под margin нет своего фона и он принимает фон родительского элемента.

margin

Рис. 1. margin

margin в основном используется для создания вертикальных и горизонтальных отступов между элементами. Аналогично другим блочным свойствам есть свойства для каждой стороны — margin-top, margin-right, margin-bottom и margin-left, соответственно устанавливающие отступ сверху, справа, снизу и слева. В примере 1 пространство между двумя вертикальными блоками задаётся с помощью свойства margin-bottom.

Пример 1. Расстояние между блоков

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>margin</title>
  <style>
   .block {
    background: #B08874; /* Цвет фона */
    color: #fff; /* Цвет текста */
    padding: 1rem; /* Поля вокруг содержимого */
    margin-bottom: 1rem; /* Расстояние снизу */
   }
  </style>
 </head>
 <body>
  <div>Первый блок</div>
  <div>Второй блок</div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Расстояние между блоков

Рис. 2. Расстояние между блоков

Значения margin

В качестве значений margin используются любые допустимые единицы длины, к примеру, пиксели, проценты, em, rem и др. В отличие от padding свойство margin может быть отрицательным (например: -10px), а также принимать значение auto. В остальном margin похоже на padding, у него также может быть от одного до четырёх значений.

Одно значение — определяет отступы для всех сторон блока.

margin: все стороны;
margin: 10px;

Два значения — первое определяет отступы сверху и снизу для элемента, второе слева и справа для элемента.

margin: верх-низ лево-право;
margin: 10px 20px;

Три значения — первое задаёт отступ сверху для элемента, второе одновременно слева и справа, а третье снизу.

margin: верх лево-право низ;
margin: 10px 20px 5px;

Четыре значения — первое определяет отступ сверху, второе справа, третье снизу, четвёртое слева. Для запоминания последовательности можно представить часы — значения идут по часовой стрелке, начиная с 12 часов.

margin: верх право низ лево;
margin: 5px 10px 15px 20px;

Значение auto

Свойство margin позволяет выравнивать элемент по центру горизонтали, если использовать значение auto и задать ширину элемента через width (пример 1).

Пример 2. Значение auto

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>margin</title>
  <style>
   .dialog {
    width: 80%; /* Ширина блока */
    background: #D4E3A5; /* Цвет фона */
    border: 2px solid #7D9B3D; /* Параметры рамки */
    padding: 1rem; /* Поля */
    margin: auto; /* Выравниваем по центру */
   }
  </style>
 </head>
 <body>
  <div>
   Полинезийцы называют Млечный путь Манго-Роа-И-Ата, 
   что в переводе с маори означает «Длинная акула на рассвете».
  </div>
 </body>
</html>

Результат данного примера показан на рис. 3.

Выравнивание блока по центру

Рис. 3. Выравнивание блока по центру

Вместо margin: auto можно использовать комбинацию margin-left: auto и margin-right: auto.

Выравнивание блока по центру через значение auto работает только в сочетании с width.

Аналогично можно выровнять по центру горизонтали изображение, для этого даже не надо указывать ширину картинки, поскольку браузер получает её автоматически. Следует только превратить изображение в блочный элемент через свойство display, как показано в примере 3.

Пример 3. Значение auto

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>margin</title>
  <style>
   .center {
    display: block; /* Блочный элемент */
    margin: auto; /* Выравниваем по центру */
   }
  </style>
 </head>
 <body>
  <img src="image/html-128.png" alt="HTML5">
 </body>
</html>

Результат данного примера показан на рис. 4.

Выравнивание картинки по центру

Рис. 4. Выравнивание картинки по центру

Проценты

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

  • По горизонтали проценты считаются от ширины всего блока.
  • По вертикали проценты считаются от ширины всего блока.

Таким образом, margin в процентах берётся от ширины всего блока, даже для margin-top и margin-botom.

Отрицательный margin

margin может быть задан с отрицательным значением, тем самым элемент сдвигается в противоположном направлении. К примеру, margin-top:-10px поднимает блок вверх на 10 пикселей, а margin-left:-10px сдвигает блок влево.

В примере 4 показан сдвиг блока с классом stat вверх, если он располагается сразу после элемента <p>.

Пример 4. Использование отрицательного значения

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>margin</title>
  <style>
   p + .stat {
    margin-top: -1rem; /* Поднимаем текст вверх */
   }
   .stat {
    font-size: 3rem; /* Размер текста */
   }
  </style>
 </head>
 <body>
  <p>Продано ёлок</p>
  <p>64</p>
 </body>
</html>

Результат данного примера показан на рис. 5. Без отрицательного margin строки располагаются далеко друг от друга.

Поднимаем блок вверх через margin-top

Рис. 5. Поднимаем блок вверх через margin-top

Обнуление margin

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

  • для <body> по умолчанию margin задан как 8px;
  • для списков <ul>, <ol>, <dl> margin-top и margin-bottom заданы как 1em;
  • для <blockquote> и <figure> margin-left и margin-right заданы как 40px.

Эти margin, согласно макету, не всегда нужны, поэтому их можно обнулить, иными словами, задать для margin нулевое значение. В примере 5 показано обнуление margin для элемента <body>, после чего элемент <header> плотно прилегает к краям браузера.

Пример 5. Обнуление margin

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>margin</title>
  <style>
   body {
    margin: 0; /* Обнуляем */
   }
   header {
    background: #D4E3A5; /* Цвет фона */
    padding: 1em; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <header><h2>Кря-кря</h2></header>
 </body>
</html>

Результат данного примера показан на рис. 6.

Обнуление margin у <body>

Рис. 6. Обнуление margin у <body>

Перейти к заданиям

webref.ru

Отправить ответ

avatar
  Подписаться  
Уведомление о