Belajar CSS chapter 6 (Box Model, Border, Outline, Margin dan Padding)

Assalamualaikum wr wb

Melanjutkan postingan yang sebelumnya kali ini saya akan menjelaskan tentang CSS Box Model, Border, Outline, Margin, dan Padding.

CSS Box Model

Box model terdiri dari :

Margin
Border
Padding
Content

Untuk mengetahui ukuran seluruhnya elemen, kamu juga harus menambahkan padding, border dan margin.

Contoh dibawah ini menunjukan bahwa total dari elemen adalah 300px :

width :250px;

padding:10px;

border:5px solid gray;

margin :10px;

Cara mengetahuinya :

lebar = 250 px

+ 20 px (padding kiri dan kanan)

+10 px (border kiri dan kanan)

+20 px (margin kiri kanan)

=300 px

Dalam menentukan ukuran keseluruhan elemen kita harus menggunakan rumus :

Total lebar = lebar + padding kiri + padding kanan + border kiri + border kanan + margin kiri + margin kanan

atau

Total tinggi = tinggi + padding atas + padding bawah + border atas + border bawah + margin atas + margin bawah

Pada contoh diatas apabila kita menggunakan Internet explorer total lebarnya bukan 300px. Untuk memperbaiki hal ini kita harus mendeklarasikan DOCTYPE seperti ini :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

CSS Border

Dengan menggunakan properti CSS border kita dapat megubah tampilan dan warna dari sebuah elemen border.

Semua Properti CSS Border

Properti	Deskripsi
border	Mengatur semua properti border dalam satu deklarasi
border-bottom	Mengatur semua properti border bawah dalam satu deklarasi
border-bottom-color	Mengatur warna dari border bawah
border-bottom-style	Mengatur tampilan dari border bawah
border-bottom-width	Mengatur lebar dari border bawah
border-color	Mengatur warna dari keempat border
border-left	Mengatur semua properti border kiri dalam satu deklarasi
border-left-color	Mengatur warna dari border kiri
border-left-style	Mengatur tampilan dari border kiri
border-left-width	Mengatur lebar dari border kiri
border-right	Mengatur semua properti border kanan dalam satu deklarasi
border-right-color	Mengatur warna dari border kanan
border-right-style	Mengatur tampilan dari border kanan
border-right-width	Mengatur lebar dari border kanan
border-style	Mengatur tampilan dari keempat border
border-top	Mengatur semua properti border atas dalam satu deklarasi
border-top-color	Mengatur warna dari border atas
border-top-style	Mengatur tampilan dari border atas
border-top-width	Mengatur lebar dari border atas
border-width	Mengatur lebar dari keempat border

Nilai dari border-style :

none
dotted
dashed
solid
double
groove
ridge
inset
outset

Contoh CSS border :

<!DOCTYPE html>

<html>

<head>

{

border-top-style:dotted;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:solid;

}

</style>

</head>

<body>

<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>

</body>

</html>

atau penulisan css nya bisa digabung menjadi :

border-style:dotted solid;

CSS Outline

Outline adalah gari yang tergambar disekitar elemen, diluar batas border.

Semua Properti CSS Outline

nomor yang ada dalam kolom mengindikasikan properti versi CSS mana yang didefinisikan (CSS1 atau CSS2).

Properti	Deskripsi	Nilai	CSS
outline	Mengatur semua properti ouline dalam satu deklarasi	outline-color outline-style outline-widthinherit	2
outline-color	Mengatur warna dari sebuah outline	color_name hex_number rgb_numberinvert inherit	2
outline-style	Mengatur tampilan sebuah outline	none dotted dashed solid double groove ridge inset outset inherit	2
outline-width	Mengatur lebar dari sebuah outline	thin medium thick lengthinherit	2

Contoh :

<!DOCTYPE html>

<html>

<head>

{

outline:#00FF00 dotted thick;

}

</style>

</head>

<body>

<p>Ini adalah merupakan contoh dari outline</p>

</body>

</html>

CSS Margin

Margin adalah yang berada disekitar elemen yang membatasi dengan elemen lain.

Semua Properti CSS Margin

Properti	Deskripsi
margin	Mengatur semua properti margin dalam satu deklarasi
margin-bottom	Mengatur margin bawah sebuah elemen
margin-left	Mengatur margin kiri sebuah elemen
margin-right	Mengatur margin kanan sebuah elemen
margin-top	Mengatur margin atas sebuah elemen

Nilai yang diizinkan

Nilai	Deskripsi
auto	Browser mengatur margin Hasilnya ditentukan browser
length	Margin pasti (dalam pixels, pt, em, dan lain-lain.)
%	margin dalam persen

Contoh penulisan :

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

Atau dapat disingkat :

margin:100px 50px;

Properti margin bisa memiliki satu nilai sampai empat nilai :

margin:25px 50px 75px 100px;
- margin atas 25px
- margin kanan 50px
- margin bawah75px
- margin kiri 100px
margin:25px 50px 75px;
- margin atas 25px
- margin kiri dan kanan 50px
- margin bawah 75px
margin:25px 50px;
- margin atas dan bawah 25px
- margin kiri dan kanan 50px
margin:25px;
- keempat margin 25px

CSS Padding

Properti CSS Padding mendefinisikan sebagai jarak antara border dengan konten.

Semua Properti Padding

Properti	Deskripsi
padding	Mengatur semua properti padding dalam satu deklarasi
padding-bottom	Mengatur padding bawah sebuah elemen
padding-left	Mengatur padding kiri sebuah elemen
padding-right	Mengatur padding kanan sebuah elemen
padding-top	Mengatur padding kanan sebuah elemen

Nilai yang diizinkan

nilai	Deskripsi
length	padding pasti (dalam pixels, pt, em, dan lain-lain.)
%	padding dalam persen

Contoh penulisan :

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

atau dapat juga :

padding:25px 50px;

Sekian untuk postingan kali ini. Terimakasih.

Wassalamualaikum wr wb

Sumber : w3schools.com

filesop.com