Заставить контейнер «очистить» поле отступа элемента без переполнения: скрыто?

Question

Заставить контейнер «очистить» поле отступа элемента без переполнения: скрыто?

0

У меня есть внешний div и внутренний div. Я хочу, чтобы внутренний div имел край 10px в верхнем конце внешнего div.

<div class="outer">
    <div class="inner">
        this one should have 10px margin top to the outer div!
    </div>
</div>

Я не хочу использовать overflow:hidden поскольку мне нужно разместить некоторый контент вне div. Итак, каковы возможности? Я знаю, что могу использовать border-top или padding-top, но это кажется мне немного взломанным. Разве нет другого способа сказать внешнему div "уважать" (ясно, какое правильное слово?) Поле внутреннего div?

Здесь соответствующий jsFiddle: http://jsfiddle.net/jmuheim/C3eDa/

Joshua Muheim 04 окт. 2013, в 08:36

Источник

0

Я не совсем понимаю, в чем проблема - «Мне нужно поместить некоторый контент за пределы div». Как это мешает вам сделать это? Можете ли вы привести пример этого?
Josh Crozier 04 окт. 2013, в 05:50
0

попробуйте это jsfiddle.net/crew1251/C3eDa/1
user1956570 04 окт. 2013, в 05:50
0

В качестве альтернативы margin-top для внутреннего div, вы можете просто добавить padding-top к внешнему div. Тот же эффект.
Paulie_D 04 окт. 2013, в 06:02
0

Я не думаю, что есть конкретный термин для этого, но эффект, который вы видите, - это падение маржи, и вы пытаетесь предотвратить это.
BoltClock♦ 04 окт. 2013, в 06:23

Показать ещё 2 комментария

Теги:

html

css

margin

2 ответа

Ещё вопросы

Я не совсем понимаю, в чем проблема - «Мне нужно поместить некоторый контент за пределы div». Как это мешает вам сделать это? Можете ли вы привести пример этого?
В качестве альтернативы margin-top для внутреннего div, вы можете просто добавить padding-top к внешнему div. Тот же эффект.
Я не думаю, что есть конкретный термин для этого, но эффект, который вы видите, - это падение маржи, и вы пытаетесь предотвратить это.

Kristin · Answer 1 · 2013-12-20T21-45-00.000Z

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

Пытаться:

/* clear margins of inner content */
.outer:before, .outer:after {
    content: "";
    display: table;
    clear: both;
}

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

Accelerator · Answer 2 · 2013-10-04T04-33-00.000Z

Ваш вопрос не очень хорошо сформулирован, поэтому я ответил, насколько мог. Я предполагаю, что вам нужно пространство размером 10 пикселей выше и снаружи внутреннего div, но внутри внешнего div. Поэтому я рекомендую поместить прокладку в верхнюю часть внешнего div. Это заставит верхний край 10px на внутреннем div независимо от того, что.

.outer {
    padding-top:10px;
}

http://jsfiddle.net/C3eDa/2/