Как убрать отступы у крайних блоков?
Друзья, как решить простой вопрос, как прижать блоки к краям блока родителя? Как к левому и правому, так и кверху и книзу. У каждого блока есть отступ справа и снизу. И вот как прижать к краям родителя группу таких блоков, непонятно.
Есть вариант на flex сделать через justify-content: space-between; Но это не очень решение мне нравится и не решит задачу с верхом и низом. Думаю как то с отрицательным margin есть решение.
Подскажите пожалуйста решение! Плиииииииззззззз.
- Вопрос задан более трёх лет назад
- 1625 просмотров
2 комментария
Простой 2 комментария
Отступ (свойства padding и margin) | CSS
В 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; 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
padding
margin
при display: inline; padding не увеличивает высоту элемента HTML, margin не смещает его вверх и вниз
span display: block; background: rgba(56, 114, 239, 0.7); padding: 15px; margin: 15px; >
Проценты у padding и margin
значение высчитывается из ширины родителя, а не от его высоты. Практическое применение.
Значение 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
Горизонтальный
возьмём несколько картинок
Вертикальный
display
margin-top
margin-bottom
.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 потомка отрицательный, и, наоборот,
- выбирается то, которое выше, если и для родителя, и для потомка они или оба отрицательные, или оба положительные.
margin-top
margin-top
Для того, чтобы убрать схлопывание, можно пойти от обратного, например, задать для родительского блока overflow: hidden;. Также есть довольно удачный способ решения проблемы.
Схлопывание margin между смежными элементами
- сумма margin-bottom верхнего и margin-top нижного элемента, если они разнонаправленные,
- выбирается то, которое выше, если оба значения margin отрицательные или оба положительные.
margin-bottom
margin-top
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 Суперский и главное позитивный такой сайт 🙂
Как убрать отступы и поля у всех элементов на странице?
Обнулить значения отступов и полей у всех элементов веб-страницы сразу.
Решение
Чтобы обнулить отступы и поля у всех элементов на странице, используйте стилевые свойства margin и padding с нулевыми значениями, добавляя их к универсальному селектору * , как показано в примере 1.
Пример 1. Убираем отступы у всех элементов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Убираем отступы * Пример заголовка
Основной текст
Результат данного примера показан на рис. 1.
Рис. 1. Нулевые отступы у всех элементов на странице
Обратите внимание, что отступов и полей нет не только у текста, но и у самой страницы.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Убрать margin у последнего элемента в строке
У меня есть N строк из товаров, и между товарами margin-right: 30 . Как сделать так, чтобы margin не применялся для последнего элемента в строке?
Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
При использовании :after убрать подчеркивание у последнего элемента в ссылке
Здравствуйте! При использовании псевдоэлемента :after свойство text-decoration: none; не работает.
Не могу убрать отступ — padding 0 и margin 0
Никак не пойму почему блок table_title вложенный в блок service_table имеет сверху отступ? У обоих.
Убрать margin при сужении сайта
Добрый день! Как сделать чтобы картинка не оставалась на месте когда сайт становится уже? На.
Inline-block галерея или как убрать margin
Добрый вечер! Необходима фотогалерея. На просторах интернета нашел 2 популярных способа — float.