Как границы влияют на размер внутренних div?

Я пытаюсь понять, как границы влияют на размер и визуализацию внутреннего div. У меня есть эта проблема в моем приложении, где граница отображается вокруг полей с ошибками, и я не могу получить CSS правильно. (Кстати, очевидно, что я пока не совсем «получаю» CSS, я над этим работаю).Как границы влияют на размер внутренних div?

Рассмотрим эту страницу:

<!DOCTYPE HTML> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Booking Dojo Application</title> 

    <style type="text/css"> 

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 

#appContainer { 
    height: 50px; 

    width: 500px; 
    background-color: red; 
} 

#innerContainer { 
    height: 50px; 
    border-width: 5px; 
    border-style: solid; 
    /*width: 100%;*/ 
} 

#ruler { 
    width: 500px; 
    background-color: blue; 
    height: 20px; 

} 

    </style> 

    </head> 

    <body> 
    <div id="ruler"></div> 

    <div id="appContainer"> 
     <div id="innerContainer"> 
     <span>AHAH</span> 
     </div> 
     </div> 
    </body> 

</html>

Если я не указать ширину внутренней DIV, то его ширина такая же, как родитель включая границы.

Но тогда, если я укажу ширину внутреннего div, произойдет что-то странное: Chrome ставит границу «вне», но ... только вправо?!?

У меня явно нет чего-то. Итак:

Почему я вижу то, что вижу?
Что я хотел бы сделать, знаю, как указать внутреннюю ширину div, чтобы получить тот же результат, что и «без ширины»? (Другие, чем ходить "99%", который, кажется, "работать" в моем приложении, но .... Мех)

источник

2014-01-18 Merc

http://jsfiddle.net/X3gw6/1/

Понадобится:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;

Дополнительная информация: http://css-tricks.com/box-sizing/

в основном, внутренняя высота DIV и ширина больше, из-за границы ... что вызвало проблемы ...

источник

2014-01-19 00:03:28 sinisake

Это потому, что границы добавляют к элементам высоту и ширину. Таким образом, ширина 100% составляет 500 пикселей плюс 5 пикселей слева и 5 пикселей справа = 510 пикселей. Вы можете видеть, что width: 490px; делает внутренний контейнер инлайн с другими элементами: http://jsfiddle.net/2wLQR/

box-sizing: border-box; остановит его от выхода линии: http://jsfiddle.net/2wLQR/1/

источник

2014-01-19 00:04:13 Omega

По границе по умолчанию добавляется в ширину. Если вы не укажете ширину, по умолчанию нужно взять все пространство, которое оно может, и сделать его пригодным. Таким образом, внутренняя ширина составляет 100%.

Когда вы указываете ширину, по умолчанию задаете внутреннюю ширину. 100% плюс границы> 100%.

размер коробки: рамка; правило при добавлении означает, что вы указываете ширину с границами. Это часть CSS3.

Если ширина равна процентам, но вам нужна граница фиксированного размера, размер окна: рамка-рамка; правило позволяет. http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

источник

2014-01-19 00:06:17 Wayne

Как границы влияют на размер внутренних div?

ответ

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