Как в css сделать картинку резиновой

резиновой

Разница между padding и margin

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

padding
margin
смайлик
img { display: block; background: #3872ef; padding: 1230px; margin: -1230px; }

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

существует свойство CSS box-sizing
box-sizing
padding
border

текст текст

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

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


значение устанавливает отступы и поля одновременно для четырёх краёв элементапервое значение определяет вертикальные отступы и поля, второе - горизонтальныепервое значение задаёт отступы и поля для верхней, второе - для правой и левой, третье - нижней сторонызначения поочерёдно используются для верхнего, правого, нижнего и левого края
padding
margin 1
смайлик
13 img { display: block; background: #3872ef; padding: 0; margin: 0; }

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

display
padding
margin

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

span { display: block; background: rgba(56, 114, 239, 0.7); padding: 15px; margin: 15px; }

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

значение высчитывается из ширины родителя, а не от его высоты. Практическое применение.
смайлик
img { background: rgba(56, 114, 239, 0.7); padding: 10%; margin: 10%; }

Значение auto у margin

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

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

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

возьмём несколько картинок
img { vertical-align: middle; margin: 0 0 0 -16px 0 0 -32px 32px 0 -32px; }

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

display
margin-top
margin-bottom
<style>.parent:before { content: ""; display: table; }.green { display: inline-block; width: 100%; height: 10px; background: green; margin: -10-55100px 0 -10-55100px; }.blue { height: 10px; background: blue; } </style> <div class="parent"> <div class="green"></div> <div class="blue"></div> </div> 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-top переходит от внутреннего элемента к родителю. Для родителя
  • значения margin складываются, если margin родителя положительный, а margin потомка отрицательный, и, наоборот,
  • выбирается то, которое выше, если и для родителя, и для потомка они или оба отрицательные, или оба положительные.
margin-top
margin-top <style>.parent { margin: -10-55100px 0 0; }.green { height: 10px; background: green; margin: -10-55100px 0 0; } </style> <div class="parent"> <div class="green"></div> <div class="blue"></div> </div>
Для того, чтобы убрать схлопывание, можно пойти от обратного, например, задать для родительского блока overflow: hidden;. Также есть довольно удачный способ решения проблемы.

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

для смежных элементов в потоке поле рассчитывается как
  • сумма margin-bottom верхнего и margin-top нижного элемента, если они разнонаправленные,
  • выбирается то, которое выше, если оба значения margin отрицательные или оба положительные.
margin-bottom
margin-top <style>.green { height: 10px; background: green; margin: 0 0 -10-55100px; }.blue { height: 10px; background: blue; margin: -10-55100px 0 0; } </style> <div class="parent"> <div class="green"></div> <div class="blue"></div> </div>


Закрыть ... [X]

Download Мульти ПАЗЛ Робокар Поли Мисс Кэти и Мистер Макс Превращение Пластик для оттиска

Как в css сделать картинку резиновой Как в css сделать картинку резиновой Как в css сделать картинку резиновой Как в css сделать картинку резиновой Как в css сделать картинку резиновой Как в css сделать картинку резиновой