CSS Layouting – BOX Sizing

Pada postingan sebelumnya di perlihatkan bahwa lebar box property width akan bertambah dengan adanya property padding, dan border, jadi akan di akumulasi. Bagaimana cara agar ukuran box atau div supaya tidak bertambah ukuran atau sesuai dengan width, caranya adalah dengan menggunakan property box-sizing. Jadi meskipun ditambah dengan padding dan border size maka ukuran widthnya tetap segitu.

Adapun contoh penulisannya adalah sebagai berikut.

/* box model simple*/
.simple {
width: 500px;
margin: 20px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* box model fancy */
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid blue 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Hasil tampilannya adalah sebagai berikut.

endang-we-css-layouting-box-sizing

untuk memberlakukan ke semua element kita bisa menggunakan cara berikut. Tanda *, akan memberlakukan kepada semua element html.

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

Semoga bermanfaat wassalam.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s