Запомним навсегда: чем отличаются margin и padding

« Предыдущая запись
 
  Следующая запись »
 

Шастая по форумам наткнулся на то, что до сих пор возникает вопрос, что делает padding, а что margin, и какие отличия между ними. Именно поэтому я решил напомнить об этом. Итак, не прибегая к заумным фразам поставим задачу и разберём пример, на котором всё станет ясно.

Задача: на странице нужен блок красного цвета (200х200 пикселей), который отступает от краёв браузера сверху и слева на 40 и 70 пикселей соответственно, и текст внутри которого отступает слева и сверху на 40 пикселей.

Решение: смотрим на рисунок и на код. Наш блок красного цвета не должен превышать 200 на 200 пикселей и он должен иметь отступ от краёв браузера (или других блоков контента). Собственно эти отступы мы делаем через margin. Если мы делаем padding, то отступ происходит внутри нашего красного блока и отступы получаются с фоном самого блока (то есть красные).

marginpadding Запомним навсегда: чем отличаются margin и padding<style>
.block {
   width: 160px;
   height: 160px;
   background-color: red;
   margin-top: 40px;
   margin-left: 70px;
   padding-top: 40px;
   padding-left: 40px;
}
</style>
<div class="block">
   текст, текст, много текста, много - много текста текста
</div>

Помимо использованных свойств (строки 6-9) есть ещё свойства margin-right, padding-right, margin-bottom, padding-bottom - они для отступов справа и снизу соответственно. Значения всех этих свойств могут быть в пикселях (px), процентах (%), либо в единицах em.

В принципе вот оно и всё. Однако есть ещё некоторые особенности работы с ними.


Особенности margin и padding

  1. Если у блоков имеется CSS-свойство float, то необходимо прописать блокам display:inline, чтобы не было двойных отступов слева и справа (подробнее в статье Как подружить Internet Explorer 6 и CSS-свойство margin?)

  2. При использовании padding, размеры padding'а должны вычитаться из высоты и ширины блока, в противном случае размер блока увеличится на размер padding'а.

  3. Если какому-то блоку задать margin-left и margin-right со значениями auto, то если у блока имеется фиксированная ширина (например 400px) и нет CSS-свойста float, то этот блок будет выровнен по центру элемента, в котором он находится. Собственно для нерезиновой вёрстки с выравниванием по центру этот способ выравнивания обычно и используется. Несмотря на то, что IE 5.5 и младше значение auto не поддерживают, это всё равно не мешает его всё время использовать=).

  4. Нежелательно использование padding и margin в таблицах, потому что эффект будет непредсказуемым в различных браузерах.

И последнее, что я хотел сказать. Не забывайте использовать сокращённые конструкции записи, например margin: 10px 0 5px 20px;. Если отступ нулевой, то ставить можно просто нолик, без указания параметров. Запомнить какой из параметров к какой границе относится очень просто - для блока отступы идут по часовой стрелке: первое число - сверху, второе - справа, третье - снизу, четвёртое - слева.

Вот собственно и всё, что я хотел рассказать сегодня. Всем счастливых выходных!


1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 19, средний: 5.00 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 20 на запись

"Запомним навсегда: чем отличаются margin и padding"

  1. статья будет интересна только полному новичку, но ты молодец, что выложил её.

  2. это да, знать об этом надо, а новички тоже читают журнал, так что…=)

  3. спасибо, это пожалуй самое понятное доходчивое описание!

  4. Спасибо, старался =)

  5. Проще дать ссылку

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

  7. спасибо! отличная статья, всё просто и понятно!))))

  8. Большое спасибо, стараимс! =)

  9. Хыиуду
    28/02/2012 at 16:18 Постоянная ссылка Цитировать

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

    Собственно, чтобы избежать этого, можно использовать css-свойство box-sizing и его братьев-близнецов -moz-box-sizing для Firefox и -webkit-box-sizing для Safari. По умолчанию оно имеет значение content-box, что значит, что свойство width означает ширину контента, что чаще всего адски неудобно. Для того, чтобы браузер рассматривал width именно как ширину всего блока вместе с его границами и paddingами, нужно установить box-sizing в border-box:
    div
    {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    }
    Вуаля!

  10. Для IE8 -ms-box-sizing: border-box;.
    В более старых версиях все зависело от Doctype

  11. Александр Шуйский
    28/02/2012 at 19:14 Постоянная ссылка Цитировать

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

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

  13. Александр Шуйский
    28/01/2013 at 10:41 Постоянная ссылка Цитировать

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

  14. Сергей
    26/02/2013 at 14:34 Постоянная ссылка Цитировать

    А если один блок находится внутри другого блока, для первого блока можно использовать padding?

  15. Александр Шуйский
    26/02/2013 at 15:30 Постоянная ссылка Цитировать

    Можно всё!)

  16. Я раньше считала, что эти свойства просты, как два рубля. А потом стала разбираться…. ой, мама… Накалякала кучу примеров, дала дополнительные ссылки, но ощущение такое, что “стрижка только началась” (во время позиционирования там всё меняется). А если без примеров, пытаться словами описать происходящее, то тогда целая книжонка выйдет.

  17. Неплохо… Огромное спасибо за инфу. Автору респект и уважуха. Думаю, эту тему можно развивать до бесконечности Хорошо пишете. Учились где-то или просто с опытом пришло?

  18. Александр Шуйский
    31/03/2016 at 8:32 Постоянная ссылка Цитировать

    Спасибо!
    Скорее с опытом, но возможно, отчасти, предрасположенность. Опыт если только от обучения в вузе (даже удивительно, если подумать).

  19. У меня вопрос, можно сделать отступ не применяя br или только через стили. Мне к примеру, чтоб сам каркас сайта от низ сайта отошел.

  20. Спасибо от новичка.

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии