Как дать равный запас для внутреннего div?

Question

Как дать равный запас для внутреннего div?

0

Как мы можем сделать внутренний div равными полями от внешнего div со всех четырех сторон?

Вот что я пробовал:

<div class="outer">
<div class="inner">
    A
</div>
</div>

Мои стили:

div
{
    overflow: hidden;
}

.outer{
    height: 100px;
    width: 100px;
    background-color: gainsboro;
}

.inner{
    background-color: wheat;
    margin: 5px;    
}

Примечание. Я хочу добиться этого с помощью чистого CSS+. Я не хочу делать что-то вроде этого:

.inner{
    height: 90px;
}

или

.inner{
    height: 90%;
}

MackMon 17 дек. 2013, в 09:07

Источник

5

Ваши решения в том, что я не хочу делать что-то подобное, это чистый CSS
Mr. Alien 17 дек. 2013, в 07:41

Теги:

html

css

html5

css3

css-float

3 ответа

Ещё вопросы

Ваши решения в том, что я не хочу делать что-то подобное, это чистый CSS

Mr. Alien · Answer 1 · 2013-12-17T05-48-00.000Z

Ну, у вас странные пожелания, так как вы не хотите использовать свойство height, поэтому единственный способ - использовать display: table; для родительского элемента и display: table-cell; для дочернего элемента. И так как элемент td не будет использовать margin am, используя padding на родительском элементе с box-sizing установленным в border-box чтобы он учитывал padding внутри, а не вне элемента.

демонстрация

div
{
    overflow: hidden;
}

.outer{
    height: 100px;
    width: 100px;
    background-color: gainsboro;
    display: table;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px;
}

.inner{
    background-color: wheat;
    display: table-cell;
}

Дум ... Что если содержимое внутреннего div превышает высоту 100px :)?
@MackMon Ну, у вас слишком много условий, было бы лучше, если вы используете height для дочернего элемента div как в любом случае вы не хотите расширяться, я дал это решение, а не absolute потому что я думал, что вам нужен расширяющий элемент, но с height Шифрование до 100% сохраняя margin , так что если вы знаете , что есть фиксированная height , так что используйте его на дочерний элемент
@MackMon и поверь мне, это идеальное решение
@MackMon другой путь - это jsfiddle.net/66bkm/1
Так как мой внешний интерфейс реагирует на высоту браузера, я не мог продолжать изменять высоту своего внутреннего div. Так что нужно больше решений, чтобы получилось лучше.
@MackMon - это все, что у меня есть, и, вероятно, вы не избавитесь от этого, используя PURE CSS

Guy Dafny · Answer 2 · 2013-12-17T04-53-00.000Z

Дайте внутренний верхний, нижний, левый и правый. это сделает промежуток между ним и внешним.

<!doctype html>
<html>
    <head>
        <title>
            Bla!
        </title>
        <style type='text/css'>
            div { overflow:hidden; }
            div.outer {height:100px; width:100px; background-color:gainsboro; position:absolute} 
            div.outer >div {top:5px; left:5px; right:5px; bottom:5px; position:absolute; background-color: wheat;} 
        </style>
    </head>
    <body>
        <div class='outer'>
            <div></div>
        </div>
    </body>
</html>

Даже это хорошее решение, так что +1 от меня :)
Используя это решение, вы можете получить любые определения блоков, которые составляют размеры (относительные, фиксированные и т. Д.). внутренний должен иметь абсолютный размер (он находится внутри внешнего).
Я не проверял это, но не должен ли div.outer быть position:relative ?

Hiral · Answer 3 · 2013-12-17T06-07-00.000Z

Дайте padding к .outer.

Пытаться:

.outer{
    height: 90px;
    width: 90px;
    padding:5px;
    background-color: gainsboro;
}
.inner{
    background-color: wheat;        
    height:100%;
}

ДЕМО здесь.