PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

Het gebruik van box-sizing

Door Guido - op 01-03-2017 23:56
867 views
Hallo,

Ik heb een vraag over het gebruik van box-sizing: border-box.

Als ik onderstaande gebruik zal de breedte van mijn .div altijd 100% zijn, ongeacht padding/border.


.div {width:100%; padding:0 2%; border:10px solid #333; box-sizing: border-box;}


Mijn vraag, is het "normaal" om de combinatie van width:100% en box-sizing te gebruiken, en dan vooral in combinatie met padding?
Normaal gesproken zou ik het oplossen zonder box-sizing, maar de border kan alleen in pixels (niet in procenten).

Guido

[size=xsmall]Toevoeging op 02/03/2017 00:48:05:[/size]

maar de border kan alleen in pixels (niet in procenten)


Als ik de pixel-breedte van het .div element heb, kan ik natuurlijk de border-breedte omrekenen in procenten, en dat van breedte (width) van de .div afhalen. Dan geen box-sizing nodig.

Guido
Joakim Broden
02-03-2017 11:58
Ik heb een reset CSS die ik voor alle website gebruik, in dit CSS bestand 'reset' ik alle elementen. Zo staat 'box-sizing' er ook in:

* {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	   	box-sizing: border-box;
}

Dit zorgt er voor dat alle elementen 'border-box' worden. Zodat in die 100% of 200px width/height al de paddings en borders zitten. Dit werkt erg lekker, als je bv 4 kolommen naast elkaar hebt met padding kun je gewoon oplossen met de onderstaande code zonder dat de padding of borders lopen te kutten.

.column {
width: 25%;
padding: 0 10px;
border: 1px solid red;

Reageren

Inloggen om te reageren