Css padding увеличивает размеры

Отступ (свойства padding и margin) | CSS

В CSS есть два казалось бы похожих свойства: padding и margin [w3.org]. Первое создаёт отступы вокруг содержимого, второе расширяет поле до границы элемента, в том числе отрицательные.

img < display: block; background: #3872ef; padding: 1230px; margin: -1230px; >

padding раздвигает div, увеличивает его ширину и высоту. А если это не нужно?

div < width: 80%; height: 80%; background: #3872ef;padding: 10px; border: 10px solid #ffff00; box-sizing: contentpaddingborder-box; >

Для каждой стороны свой padding и margin

значение устанавливает отступы и поля одновременно для четырёх краёв элемента первое значение определяет вертикальные отступы и поля, второе — горизонтальные первое значение задаёт отступы и поля для верхней, второе — для правой и левой, третье — нижней стороны значения поочерёдно используются для верхнего, правого, нижнего и левого края
padding
margin 1

img < display: block; background: #3872ef; padding: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; >

Чем отличаются padding и margin для блочных и встроенных элементов

при display: inline; padding не увеличивает высоту элемента HTML, margin не смещает его вверх и вниз

Проценты у padding и margin

Значение auto у margin

для ‘margin-top’ и ‘margin-bottom’ значение ‘auto’ приравнено к значению ‘0’ [w3.org]. А для ‘margin-left’ и ‘margin-right’ значение ‘auto’ размещает по центру или прижимает к правому (левому) краю элемент в горизонтальной плоскости, то есть выравнивает элемент по горизонтали. Работает только для блочных тегов, для встроенных существует его аналог text-align.

img < display: block; margin: 10px 10px 10px auto; >

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

Горизонтальный

Вертикальный

 .parent:before < /* убрать схлопывание с родителем (без поддержки IE6 и IE7, более подробная версия) */ content: ""; display: table; > .green display: inline-block; /* при расчёте поля учитывается line-height родителя, в примере она 25.6px */ width: 100%; height: 10px; background: green; margin: -10-55100px 0 -10-55100px; > .blue

margin-top	margin-bottom	описание
—	—	margin-top игнорируется
—	+	сначала элемент поднимается на высоту margin-bottom, но не выше значения margin-top, затем отодвигает вниз соседа на остаток (при его наличии)
0	—	элемент двигается вниз
+	—	margin-top больше margin-bottom : элемент двигается вниз, сосед смещается на значение margin-bottom margin-top меньше margin-bottom : margin-top игнорируется

Схлопывание margin между родителем и дочерними элементами

для крайнего верхнего блочного элемента, который не вынут из потока (с помощью, скажем, float или position: absolute;) и родитель которого имеет

padding: 0; border: 0; overflow: visible; display: inline-block; display: table;

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

Для того, чтобы убрать схлопывание, можно пойти от обратного, например, задать для родительского блока overflow: hidden;. Также есть довольно удачный способ решения проблемы.

Схлопывание margin между смежными элементами

• сумма margin-bottom верхнего и margin-top нижного элемента, если они разнонаправленные,
• выбирается то, которое выше, если оба значения margin отрицательные или оба положительные.

53 комментария:

Tanka Спасибо! Полезная информация и так наглядно — все по полочкам 🙂 NMitra Радостно) SynVelesa В то, что информация полная и полезная, сомнений нет, но для чайников, вроде меня, по сложности это где то между китайской грамотой и клинописью Междуречья. NMitra Я понимаю, сама была такая. По скриншотам пыталась понять как, куда и что добавить. Тема впервые понадобилась, когда в шаблоне что-то (уже подзабыла что именно) нужно было подвинуть. Понимание придёт по мере практики и необходимости использования данного действия. SynVelesa NMitra, спс Вам, можно я Ваш блог себе в друзья добавлю? NMitra Буду рада! Светлана Ковалева Спасибо, пригодилось! ❀ Оля ❀ все получилось. супер. спасибо, все понятно 🙂 Спутник Самый полезный блог в галактие. Спасибо. NMitra Благодарю на слове, очень приятно)) Анонимный Спасибо! NMitra Рада стараться. Анонимный Спасибо Вам за доходчивое объяснение! NMitra И Вам за повышение настроения и желания дальнейшего улучшения блога! Ivaila А я так и не понял, как работает отрицательный margin NMitra Я тоже долго тыкала по своему же примеру, чтобы до конца разобраться и хоть как-то сформулировать эти выводы словами :))) Смотрите какого результата вы хотите добиться и по первому делу делайте по аналогии. Ivaila А сколько вам потребовалось времени, чтобы начать пользоваться CSS не по аналогии, а опираясь на собственные знания по свойствам CSS? NMitra Вы не заметите как это произойдёт 🙂 Единственное, я не запоминаю точное написание свойств (это относится не только к CSS, но и JavaScript), поэтому ношусь по страницам блога.

Не нужно всё знать, достаточно знать где посмотреть как нужно делать. Ещё мне Mozilla помогает. Правая кнопка просто бесценна и экономит кучу времени. Виталий «Для каждой стороны свой padding и margin

первое значение определяет горизонтальные отступы и поля, второе — вертикальные»
Ошибочка. первое значение это верх-низ, второе — стороны. Счет начинается всегда сверху и всегда первое значение будет — верх, а без пары еще и низ. NMitra Абсолютно верно, спасибо за замечание, подправила. Статья длинная получилась, взгляд замылился. Рита Подскажите пожалуйста, где мне в шаблоне блоггер изменить padding в основной колонке сообщения и в боковых? margin я уже меняла, чтоб увеличить ширину колонок, но ничего не изменилось, потому что большие отступы именно внутри колонок между текстом и внутренним краем колонки. NMitra Сложно сказать не видя блог. Посмотрите эти статьи

http://shpargalkablog.ru/2010/09/sdelat-otstup-dlya-abzatsa-blogger.html Рита Наташа,ставлю ссылку на блог, посмотрите пожалуйста. Он пустой, но я сделала разделители между колонками, чтоб было видно отступы. В главной колонке, где должны быть статьи, я, вроде бы, уменьшила расстояние от текста до краев колонки. А вот в боковых колонках, видите, какой большой отступ от края. Из-за этого на содержимое колонок остается очень мало места в ширину. А если просто расширить боковые колонки, то они же расширяются засчет центральной колонки, а она и так не слишком широкая. В общем хотелось бы уменьшить внутренний отступ от краев колонки в боковых колонках. Я уже совала в шаблон padding: 0px во все места, где встречалось что-то связанное с колонками и виджетами, но эффекта не дало:))) Может Вы что-нибудь подскажете?:) NMitra Добавьте в конец CSS файла

.main-inner .column-center-inner, .main-inner .column-left-inner, .main-inner .column-right-inner padding: 0;
>

.section margin: 0;
> Рита Уря! Получилось! Большое Вам спасибо! Целый день вчера мучилась))) Mishechka Наталья, у меня ссылка «Подробнее» под анонсом стоит очень близко к тексту. Я пробовал вставлять разрыв страницы на строку ниже, то всё нормально, но тогда получается большой разрыв в тексте. Как её опустить ниже на строку или ещё как-нибудь? NMitra Mishechka, откройте профиль или подписывайтесь «Имя/URL», где URL — это адрес блога. Я, к сожалению, владею не лучшей памятью, не запоминаю адреса сайтов. Mishechka Наталья, что-то я не понял как открыть профиль.
А блог этот я пока настраиваю. NMitra Попробуйте прописать перед тегом /head

Mishechka Наташа, работают оба варианта, теперь не знаю какой выбрать. Я склоняюсь ко второму — он короче и можно указать padding-top в px. NMitra 🙂 Mishechka Большое спасибо! Mishechka Наталья, выяснилось, работает только на Главной. NMitra Вместо

выберите удобный вариант http://shpargalkablog.ru/2011/02/uslovnye-tegi-v-blogger.html Mishechka Наталья, а как изменить стиль, цвет, размер шрифта ссылки «Подробнее»? NMitra Посмотрите, я тут писала гостевой пост http://blogohelp.blogspot.ru/2011/02/blog-post.html Mishechka Вы там пишите: после:

Но раздел Variable definitions я удалил, куда теперь писать? NMitra Тогда сами. Например, http://yandex.ru/yandsearch?lr=51&text=размер+шрифта+css Mishechka .jump-link — имеет отношение только к ссылке «Подробнее» или ко всем ссылкам? Я ведь хочу изменить только ссылку «Подробнее». NMitra Только «Подробнее» Mishechka Свои вопросы в комментариях 26 и 35 я решил одним ударом:

Стили для ссылки «Подробнее»:

В разделе Content (общий вид) добавляем код:

.jump-link font: normal bold 11px/15px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
>

Не уверен, что это правильно, работает. Юрий Помогите, пожалуйста, разобраться с казалось бы простой ситуацией. Между тегами body прописал посредством div два блока. Они представляют собой обычные квадраты, один из которых вложен в другой. В стилях для каждого из них задано минимальное количество свойств (для чистоты эксперимента): высота, ширина и background. У блока-родителя width: 800px; height: 800px, а у дочернего блока width: 600px; height: 600px. Задача — отцентрировать при помощи свойства margin дочерний блок внутри родительского (свойство прописывается в стилях для ДОЧЕРНЕГО блока). В итоге margin(по 100px со всех сторон) срабатывает только слева и справа. Верхняя граница дочернего блока остается прилипшей к родительскому. Не могу понять причины. Конечно, если прописать родительскому блоку padding или дочернему — float, то все работает отлично. Но в данном случае элементы с float и position здесь абсолютно не нужны. Возможна ли в такой ситуации центровка только посредством прописывния margin для дочернего блока? NMitra У вас схлопывается margin. Выберите наиболее подходящий вариант выше, например такой

div div display: inline-block;
>

div div position: relative;
top: 100px;
margin: 0 auto;
> Юрий Первый вариант сразу же подошел. Раньше никогда не использовал margin для дочерних элементов (только для соседних блоков). Оказалось, что толком даже основ CSS не знаю (хотя уже практиковался на верстке «резиновых» тем). Век живи — век учись. Спасибо большое. NMitra Это нормально )) Я только сейчас с семантикой решила разобраться http://shpargalkablog.ru/2013/09/html-cheat-sheet.html Вот где точно хаос. display: inline-block; для div в IE7 и ниже не работает. Анонимный Доброго времени. Очень нужна помощь! Вставляю картинку в низ форума, и получается вот такое: http://uploads.ru/cBmUi.jpg. Точнее, после самой картинки фон страницы продолжается дальше, а очень хочеться его убрать. Уже все перепробовала, никак не могу убрать то продолжение. Если код с margin написать по другому картинка уходит в правую сторону на 60рх. Тупик.. Подскажите что не так делаю..( NMitra Доброго времени, если проблема актуальна, то дайте ссылку адреса форума, по картинке давать советы невозможно. Vegan Boom А как в конкретном посте увеличить отступ от правого края всего содержимого (и текста, и картинок, и пр.)?
Не залезая в шаблон, а просто редактируя пост. NMitra Заходите в редактор конкретного Сообщения, переходите на вкладку «HTML» и между тегом пишите ваш код CSS, например, такой

Тут главное правильно выбрать селектор, две статьи в помощь:
1) http://shpargalkablog.ru/2014/05/see-html.html
2) http://shpargalkablog.ru/2011/10/css-selectors.html

Можно также всё содержимое статьи взять в

Vegan Boom Вы так оперативно отвечаете! И ответы всега такие дельные. Спасибо огромнейшее! Анонимный Большое спасибо! Отличное пояснение к свойствам. NMitra Благодарю за отзыв! Постаралась статью сделать интерактивной IVan Суперский и главное позитивный такой сайт 🙂

Источник