Box-sizing przy inputach (formularzach)

Question

Witam! Ostatnio przepracowywałem odcinek 4 kursu CSS (Stylizowanie inputów). Zostaje tam wspomniana informacja o innym sposobie naliczania szerokości przez inputy text, password itd. a inputem submit. Pan Mirosław wytłumaczył to gdy po dodaniu paddingu do inputów wyglądało to tak:

 

Jak widać input type=text oraz type=password są dłuższe od submita, właśnie z powodu innego sposobu naliczania szerokości. Dzisiaj sam stylizowałem sobie formularz i ku mojemu zdziwieniu, mimo że nie użyłem linii box-sizing: border-box; input text oraz input submit były równej długości. Sprawdzałem różne ustawienia, dałem nawet takie same wartości szerokości i paddingu jak na filmie i nic. Mógłby ktoś mi wytłumaczyć o co chodzi?

Answer 1

Dzięki box sizing border box takie bajery jak paddingi, marginy i border nie zmieniają szerokości diva; są w nią wliczone.

Comments

Tak rozumiem to. Ale nie rozumiem dlaczego Pan Mirek na filmie miał tę różnicę w długości input text i submit, która wyrównał poprzez ustawienie dla input text box-sizing: border box; a ja miałem to od razu zrównane

---

Możliwe, że przeglądarka odwołała się do swojej pamięci podręcznej (cache) i wyświetliła to, co miałeś zapisane wcześniej. Wyczyść pamieć podręczną (cache) - Ctrl+Shift+Delete i spróbuj ponownie. Ewentualnie Ctrl+F5 lub Ctrl+R.

---

Witam. border-box zawiera dopełnienia i obramowanie ale nie margines.

---

Gdyby zawierał marginesy, to byłby bez sensu :P

---

Pamięć wyczyszczona i nic się nie zmieniło.