Как исправить свертывание верхнего и нижнего полей?

Я новичок в CSS и пытаюсь понять, как исправить следующую строку, чтобы она не работала для верхнего и нижнего полей. Однако он отлично работает для боковых полей:

.contents {
    ...
    margin: 10px 10px 10px 10px;
}

Пример: http://jsfiddle.net/LCTeU/

Как это исправить?

Редактировать:

Я также попытался вместо этого заполнить контейнер, и это просто расширяет контейнер до максимального размера (почему?):

.container {
    ...
    padding: 10px 10px 10px 10px;
}

css margin
person Mike Holler    schedule 10.05.2013    source источник
comment
Я думаю, вы можете путать поля с отступами. Отступ внутри, поля снаружи. См. - developer.mozilla.org/en-US/docs/CSS/padding< /а>   -  person Jez    schedule 10.05.2013
comment
Предоставленная вами скрипка не сворачивает поля   -  person Kevin Bowersox    schedule 10.05.2013
comment
Дополнительные советы: комментарии CSS начинаются с /* и заканчиваются на */.   -  person Rob W    schedule 10.05.2013
comment
Быстрый совет, margin: 10px 10px 10px 10px; = margin: 10px;   -  person j08691    schedule 10.05.2013
comment
@KevinBowersox Эта скрипка действительно схлопывает поля. Поля <h2> и <article> свернуты. Вот как OP хотел, чтобы это выглядело: jsfiddle.net/LCTeU/2 (примечание: Я добавил overflow:hidden к <article> для достижения этого эффекта, другим методом будет добавление border: 1px solid transparent;, оба имеют побочные эффекты).   -  person Rob W    schedule 10.05.2013
comment
Возможно, вам нужны отступы and?   -  person Jez    schedule 10.05.2013
comment
Не знаю, почему я получил отрицательные голоса. Просто пытаюсь учиться. Может кто-нибудь, пожалуйста, дайте мне пример? Я потратил буквально часы на это.   -  person Mike Holler    schedule 10.05.2013
comment
@RobW Упс, я просматривал статьи, я запутался, так как пост не соответствует скрипке.   -  person Kevin Bowersox    schedule 10.05.2013

Ответы (4)


arrow_upward
4
arrow_downward

Этот ответ основан на предоставленной вами скрипке.

Я думаю, что ваш подход неверен в том смысле, что вы применяете поле к article, чтобы разместить его внутри родительского тега div. В этом случае лучше использовать заполнение, так как вы пытаетесь отделить содержимое от его внешней границы. Итак, применяйте:

article {
  //display: block;
  clear: both;
  padding: 10px;
}

Это приведет к увеличению размера тегов article, однако теперь границы элементов контейнера div будут соприкасаться. Для создания пространства между элементами применяется margin.

.rounded-box {
  background-color: #959392;
  border-radius: 15px;
  margin: 10px 0px;
}

Рабочий пример http://jsfiddle.net/LCTeU/4/

Итак, если вы хотите создать пространство между двумя элементами, используйте margin. Если вы хотите создать пространство между элементом и его границей (или хотите, чтобы элемент был окружен пробелами), используйте padding.

person Kevin Bowersox    schedule 10.05.2013
comment
Замечательный ответ. Большое спасибо! Можете ли вы объяснить еще одну вещь, пожалуйста? Почему элементы div соприкасаются при добавлении заполнения? - person Mike Holler; 10.05.2013
comment
Потому что маржа не была предоставлена. В вашем первом примере это произошло бы, однако вы указали clear:both в статье. См. jsfiddle.net/LCTeU/5, который удаляет - person Kevin Bowersox; 10.05.2013
comment
Не обращайте внимания на ясность, потому что не было полей для разделения элементов. - person Kevin Bowersox; 10.05.2013

arrow_upward
10
arrow_downward

Используйте overflow:auto для любого из элементов, участвующих в сворачивании. Например:

article {
    overflow:auto;
}

пример jsFiddle

person j08691    schedule 10.05.2013
comment
Как этот ответ соотносится с ответом, который @KevinBowersox дает выше? Это меньше строк, но мне кажется, лучше указать поля и отступы, чем использовать свойство переполнения, поскольку мне не сразу понятно, как это работает. - person Mike Holler; 10.05.2013
comment
Извините, что не объяснил дальше. То, как это работает, связано с контекстом форматирования блока. См. colinaarts.com/articles/the-magic-of-overflow-hidden и developer.mozilla.org/en-US/docs/CSS/ Block_formatting_context. - person j08691; 10.05.2013
comment
Благодарю вас! Это то, что я искал. - person Mike Holler; 10.05.2013

arrow_upward
3
arrow_downward

Я нашел исправление, которое не требует заполнения и не требует изменения overflow элемента контейнера:

article:after {
    content: "";
    display: block;
    overflow: auto;
}

Идея состоит в том, что мы добавляем еще один элемент внизу, который разрушает сворачивающееся поле, не влияя на высоту или отступы.

person Erik Rothoff    schedule 19.02.2018

arrow_upward
0
arrow_downward

В соответствии с исправлением, предложенным Эриком Ротхоффом, которое, похоже, не работает в Safari, сначала я попробовал следующее:

article:after {
    content: "";
    display: inline-block;
    overflow: auto;
}

Это действительно работает в Safari, но занимает место, от которого я не мог избавиться, так сильно искажая сетку, что мне пришлось бы менять поля.

Затем я решил объединить их, выполнив следующие действия:

article:after {
    content: "";
    display: block;
    padding-top: 1px;
    margin-top: -1px;
}

Это работает в Safari, имеет приемлемую высоту 1 пиксель, которая сводится на нет отрицательным верхним полем.

person Ramon de Jesus    schedule 10.12.2020