Заполнение добавляет к ширине/высоте div?

<html> 
<head> 
<style> 
    * { margin:0; border:0; padding:0; } 
    div { height:500px; } 
    #container { width:1000px; background-color:#000; } 
    #column-one { float:left; padding:10px; width:500px; background-color:#234; } 
    #column-two { float:left; padding:10px; width:500px; background-color:#345; } 
</style> 
</head> 
<body> 
<div id="container"> 
    <div id="column-one"> 
    </div> 
    <div id="column-two"> 
    </div> 
</div> 
</body> 
</html>

Противопоказания.Заполнение добавляет к ширине/высоте div?

источник

2011-02-02 Sid Bayer

У меня есть вопрос? И какой браузер (IE пресловут для этого, он имеет «коробку»). – Sean

все браузеры добавляют отступы, границы и границы к ширине/высоте элемента. – jennyfofenny

Это хорошо известная функция. Каков твой вопрос? – Leigh

В сообщении content-box model указано, что заполнение и границы не учитываются в width, установленном для коробки. Поэтому они добавляют к своему width.

Современные браузеры поддерживают CSS3-х box-sizing: border-box вызывать width представлять общую ширину содержимого, отступов и границ (по умолчанию это, конечно же, content-box, вызывая выше поведение).

источник

2011-02-02 21:16:04 BoltClock

Я знаю, что это старый, и тема, которая избита до смерти, но * почему * модель содержимого не включает прописку? Было бы намного проще создавать точные макеты, если бы я мог конкретно контролировать размер моих div и по-прежнему иметь прописку в них. Кроме того, мне кажется, что мне не повезло ни в IE10, ни в Chrome с атрибутом «размер окна». Извините, если я сокрушусь. Это не твоя вина. –

@Mike U: Это потому, что контент не может отображаться в области заполнения по определению. У Firefox есть экспериментальное значение «padding-box», которое упоминается в спецификации, но оно подвержено риску и не реализовано нигде. В игре должно быть что-то еще, если вы не можете получить размер окна для работы в IE10 или Chrome, потому что, насколько я знаю, они оба поддерживают его без изменений. – BoltClock

Я понимаю * как * коробка модель работает. В основном просто любопытно * почему * это работает именно так. Это кажется неинтуитивным и нелогичным. Я получил атрибут box-model для работы с моего предыдущего комментария. Кажется, вы не можете просто применить его к определенным классам. Единственный способ, которым я работал, это применить его к «*». Классический способ просто кажется нелогичным. Если я хочу, чтобы что-то было на 40% экрана, а у вас 4 штуки, невозможно сделать правильный макет с классической моделью. я просто думаю. По крайней мере, я знаю, как обойти это сейчас. –

Ширина - это ширина, которую может заполнить ваш контент, а не ширина поля, ограниченного вашей границей.

источник

2011-02-02 21:10:42 greg0ire

Возможно, я неправильно понял, но я думаю, вы можете решить вашу проблему, используя width: auto для div вместо width: 100%; PS: Я знаю, что сообщение старое, но, возможно, еще может быть полезно ...

источник

2015-07-24 23:15:58

Заполнение добавляет к ширине/высоте div?

ответ

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