Шастая по форумам наткнулся на то, что до сих пор возникает вопрос, что делает padding, а что margin, и какие отличия между ними. Именно поэтому я решил напомнить об этом. Итак, не прибегая к заумным фразам поставим задачу и разберём пример, на котором всё станет ясно.
Задача: на странице нужен блок красного цвета (200х200 пикселей), который отступает от краёв браузера сверху и слева на 40 и 70 пикселей соответственно, и текст внутри которого отступает слева и сверху на 40 пикселей.
Решение: смотрим на рисунок и на код. Наш блок красного цвета не должен превышать 200 на 200 пикселей и он должен иметь отступ от краёв браузера (или других блоков контента). Собственно эти отступы мы делаем через 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
-
Если у блоков имеется CSS-свойство float, то необходимо прописать блокам display:inline, чтобы не было двойных отступов слева и справа (подробнее в статье Как подружить Internet Explorer 6 и CSS-свойство margin?)
-
При использовании padding, размеры padding'а должны вычитаться из высоты и ширины блока, в противном случае размер блока увеличится на размер padding'а.
-
Если какому-то блоку задать margin-left и margin-right со значениями auto, то если у блока имеется фиксированная ширина (например 400px) и нет CSS-свойста float, то этот блок будет выровнен по центру элемента, в котором он находится. Собственно для нерезиновой вёрстки с выравниванием по центру этот способ выравнивания обычно и используется. Несмотря на то, что IE 5.5 и младше значение auto не поддерживают, это всё равно не мешает его всё время использовать=).
-
Нежелательно использование padding и margin в таблицах, потому что эффект будет непредсказуемым в различных браузерах.
И последнее, что я хотел сказать. Не забывайте использовать сокращённые конструкции записи, например margin: 10px 0 5px 20px;. Если отступ нулевой, то ставить можно просто нолик, без указания параметров. Запомнить какой из параметров к какой границе относится очень просто - для блока отступы идут по часовой стрелке: первое число - сверху, второе - справа, третье - снизу, четвёртое - слева.
Вот собственно и всё, что я хотел рассказать сегодня. Всем счастливых выходных!
(голосов: 20, средний: 5.00 из 5)
Загрузка ...
24/01/2010 at 13:54 Постоянная ссылка Цитировать
статья будет интересна только полному новичку, но ты молодец, что выложил её.
24/01/2010 at 14:28 Постоянная ссылка Цитировать
это да, знать об этом надо, а новички тоже читают журнал, так что…=)
03/04/2011 at 23:32 Постоянная ссылка Цитировать
спасибо, это пожалуй самое понятное доходчивое описание!
04/04/2011 at 0:04 Постоянная ссылка Цитировать
Спасибо, старался =)
15/04/2011 at 1:59 Постоянная ссылка Цитировать
Проще дать
16/04/2011 at 13:06 Постоянная ссылка Цитировать
хорошая картинка, спасибо.
правда, думается, для понимания маргина и паддинга картинка немного нагружена
31/01/2012 at 15:51 Постоянная ссылка Цитировать
спасибо! отличная статья, всё просто и понятно!))))
31/01/2012 at 16:22 Постоянная ссылка Цитировать
Большое спасибо, стараимс! =)
28/02/2012 at 16:18 Постоянная ссылка Цитировать
Собственно, чтобы избежать этого, можно использовать 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 */
}
Вуаля!
28/02/2012 at 17:29 Постоянная ссылка Цитировать
Для IE8 -ms-box-sizing: border-box;.
В более старых версиях все зависело от Doctype
28/02/2012 at 19:14 Постоянная ссылка Цитировать
Всем спасибо за полезное добавление! Иметь в виду стоит, хотя на практике, как мне кажется, проще вычесть из нужной ширины значение отступов (обратные случаи не припомню), и миниплюс, что кода поменьше.
28/01/2013 at 10:16 Постоянная ссылка Цитировать
Я из многих начинающих с позиционированием туговато, ясно что небходимо больше практиковаться. Нет системы (или я чего то не знаю ,дохожу через интернет -поиск) приходится часто возвращаться в поисках недостающего материала, у Вас все хорошо изложено. Нет плохих учеников, есть плохие учителя. Спасибо.
28/01/2013 at 10:41 Постоянная ссылка Цитировать
Вам спасибо за приятный отзыв. Вы правы, очень часто и учебники продаются, и блоги пишутся, но что авторы хотят сказать – не ясно: или материал плохо изложен, или просто он недостаточно информативнен.
26/02/2013 at 14:34 Постоянная ссылка Цитировать
А если один блок находится внутри другого блока, для первого блока можно использовать padding?
26/02/2013 at 15:30 Постоянная ссылка Цитировать
Можно всё!)
12/03/2013 at 14:53 Постоянная ссылка Цитировать
Я раньше считала, что эти свойства просты, как два рубля. А потом стала разбираться…. ой, мама… Накалякала кучу примеров, дала дополнительные ссылки, но ощущение такое, что “стрижка только началась” (во время позиционирования там всё меняется). А если без примеров, пытаться словами описать происходящее, то тогда целая книжонка выйдет.
31/03/2016 at 8:15 Постоянная ссылка Цитировать
Неплохо… Огромное спасибо за инфу. Автору респект и уважуха. Думаю, эту тему можно развивать до бесконечности Хорошо пишете. Учились где-то или просто с опытом пришло?
31/03/2016 at 8:32 Постоянная ссылка Цитировать
Спасибо!
Скорее с опытом, но возможно, отчасти, предрасположенность. Опыт если только от обучения в вузе (даже удивительно, если подумать).
01/04/2016 at 22:51 Постоянная ссылка Цитировать
У меня вопрос, можно сделать отступ не применяя br или только через стили. Мне к примеру, чтоб сам каркас сайта от низ сайта отошел.
07/05/2016 at 13:09 Постоянная ссылка Цитировать
Спасибо от новичка.