Пробел между родительским div и дочерним div?

Код:Пробел между родительским div и дочерним div?

HTML

<body> 
    <div class="wrap"> 
     <div class="box">???</div> 
    </div> 
</body>

CSS

.wrap { 
    background-color: #0000FF; 
    display: block; 
    height: 600px; 
    margin: 0px auto; 
    padding: 0px; 
    width: 600px; 
} 

.box { 
    border: solid 20px #FF0000; 
    color: #FFFFFF; 
    display: block; 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
    text-align: center; 
    width: 100%; 
}

JSFiddle:
http://jsfiddle.net/5k0ddtdn/4/

Я ожидаю красную границу, чтобы полностью обернуть вокруг синего родителяdiv, считая это не border-box.

Почему это не так?

источник

2015-02-27 thelittlegumnut

Это потому, что ** не ** 'границы box' что вызывает пространство. В настоящее время это 'content-box', что означает: _Это стиль по умолчанию, определенный стандартом CSS. Свойства ширины и высоты измеряются, включая только содержимое, но не прописку, границу или маржу. Для получения дополнительной информации см. [Размер коробки] (https://developer.mozilla.org/en-US/docs/Web/CSS/box-size) –

обновление ваш ящик примерно так:

.box { 
    border: solid 20px #FF0000; 
    color: #FFFFFF; 
    display: block; 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
    text-align: center; 
    width: 100%; 
    box-sizing: border-box; 
}

Live Demo

источник

2015-02-27 08:22:37

Любые идеи относительно того, почему мой не работает? Достойное решение, но граница по-прежнему не обертывается вокруг «.wrap» внизу, как это должно быть интуитивно. – thelittlegumnut

Добавить box-sizing: border-box; в .box.

.box {box-sizing: border-box;}

http://jsfiddle.net/5k0ddtdn/8/

В коде, внутренний элемент имеет ширину 600px + 40px границу, родительский элемент (.wrap имеет 640px в общей сложности). Вам необходимо изменить box-model или установить правильный размер внутреннего элемента (width: 560px; height: 560px;). Вы можете удалить width для внутреннего элемента и установить только height: 560px;.

http://jsfiddle.net/5k0ddtdn/10/

источник

2015-02-27 08:24:19 panther

Пробел между родительским div и дочерним div?

ответ

Смежные вопросы