CSS Layouting – Box Model

Box atau  elemen div memiliki property width yang bisa di seting, sehingga ukuran lebarnya bisa ditentukan. Berikut ada dua box model contoh yang dimana bisa kita cermati perbedaanya terkait dengan property width dan property lainnya.

.simple {
width: 500px;
margin: 20px auto;
}
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border-width: 10px;
}

pada style css di atas hasilnya berikut.

endang-wp-css-layout-simple-fancy

bisa dilihat pada class simlpe ukuran sesuai dengan 500px untuk lebarnya. sedangkan pada class fancy ada penambahan padding 50px dan border lebar 10px, sehingga lebar total menjadi 500px+50px+50px+10px+10px  = 620px; terjadi akumulasi penambahan angka untuk lebarnya. ini terjadi karena ada penambahan lebar pada beberapa  property. 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