Wypełnienie dodaje do szerokości/wysokości 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>

Rzeczywiście sprzeczne z intuicją.Wypełnienie dodaje do szerokości/wysokości div?

Źródło

2011-02-02 Sid Bayer

err to jest pytanie? I jaka przeglądarka (IE jest znana z tego, że ma "busted" model pudełkowy). – Sean

wszystkie przeglądarki dodają dopełnienie, margines i krawędzie do szerokości/szerokości elementu – jennyfofenny

Jest to dobrze znana "funkcja". Jakie jest Twoje pytanie? – Leigh

Numer content-box model stwierdza, że wypełnienie i krawędzie nie są uwzględniane w zestawie width ustawionym dla ramki. Dodają więc do swojego width.

Nowoczesne przeglądarki obsługują CSS3 na box-sizing: border-box spowodować width do reprezentowania szerokość całkowitą zawartość, padding i granice (domyślnie jest to, oczywiście, content-box, wywołując powyższy zachowania).

Źródło

2011-02-02 21:16:04 BoltClock

Wiem, że to jest stary temat, który jest bity na śmierć, ale * dlaczego * model zawartości nie zawiera dopełnienia? Byłoby dużo łatwiejsze tworzenie precyzyjnych układów, gdybym mógł dokładnie kontrolować rozmiar moich elementów div i nadal mieć w nich dopełnienie. Poza tym nie wydaje mi się, że mam szczęście w IE10 lub Chrome z atrybutem "box-sizing". Przepraszam, jeśli brzmię sfrustrowany. To nie twoja wina. –

@Mike U: Dzieje się tak dlatego, że treść nie może być z definicji wyświetlana w obszarze dopełnienia. Firefox ma eksperymentalną wartość "padding-box", która jest wymieniona w specyfikacji, ale jest zagrożona i nie jest implementowana nigdzie indziej. Musi być coś jeszcze w grze, jeśli nie możesz zmienić rozmiarów skrzynek, aby działały w IE10 lub Chrome, ponieważ o ile mi wiadomo, obydwie obsługują go w nieskrępowany sposób. – BoltClock

Rozumiem * jak * działa model pudełkowy. Głównie po prostu ciekawi * dlaczego * działa w ten sposób. Wydaje się to takie nieintuicyjne i nielogiczne. Otrzymałem atrybut modelu pudełkowego do pracy od czasu poprzedniego komentarza. Wydaje się, że nie możesz po prostu zastosować go do konkretnych klas. Jedynym sposobem, w jaki udało mi się to osiągnąć, było zastosowanie go do "*". Klasyczny sposób wydaje się nielogiczny. Jeśli chcę, aby coś stanowiło 40% ekranu i miało dopełnienie o wielkości 4 pikseli, niemożliwe jest wykonanie właściwego układu z klasycznym modelem. tylko chęć, tak myślę. Przynajmniej wiem, jak sobie z tym poradzić. –

Szerokość to szerokość, jaką może wypełnić treść, a nie szerokość ramki rozdzielona ramką.

Źródło

2011-02-02 21:10:42 greg0ire

Być może źle zrozumiałem, ale myślę, że możesz rozwiązać swój problem, używając width: auto dla div zamiast width: 100%; PS: Wiem, że post jest stary, ale może nadal może być przydatny ...

Źródło

2015-07-24 23:15:58

Wypełnienie dodaje do szerokości/wysokości div?

Odpowiedz

Powiązane problemy