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
PropertiDeskripsi
borderMengatur semua properti border dalam satu deklarasi
border-bottomMengatur semua properti border bawah dalam satu deklarasi
border-bottom-colorMengatur warna dari border bawah
border-bottom-styleMengatur tampilan dari border bawah
border-bottom-widthMengatur lebar dari border bawah
border-colorMengatur warna dari keempat border
border-leftMengatur semua properti border kiri dalam satu deklarasi
border-left-colorMengatur warna dari border kiri
border-left-styleMengatur tampilan dari border kiri
border-left-widthMengatur lebar dari border kiri
border-rightMengatur semua properti border kanan dalam satu deklarasi
border-right-colorMengatur warna dari border kanan
border-right-styleMengatur tampilan dari border kanan
border-right-widthMengatur lebar dari border kanan
border-styleMengatur tampilan dari keempat border
border-topMengatur semua properti border atas dalam satu deklarasi
border-top-colorMengatur warna dari border atas
border-top-styleMengatur tampilan dari border atas
border-top-widthMengatur lebar dari border atas
border-widthMengatur lebar dari keempat border

Nilai dari border-style :
  • none
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
Contoh CSS border :
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
</style>
</head>
<body>
<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</body>
</html>

Hasilnya :
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).
PropertiDeskripsiNilaiCSS
outlineMengatur semua properti ouline dalam satu deklarasioutline-color
outline-style
outline-width
inherit
2
outline-colorMengatur warna dari sebuah outlinecolor_name
hex_number
rgb_number
invert
inherit
2
outline-styleMengatur tampilan sebuah outlinenone
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
2
outline-widthMengatur lebar dari sebuah outlinethin
medium
thick
lengthinherit
2

Contoh :
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
p
{
outline:#00FF00 dotted thick;
}
</style>
</head>
<body>
<p>Ini adalah merupakan contoh dari outline</p>
</body>
</html>
Hasilnya :

CSS Margin

Margin adalah yang berada disekitar elemen yang membatasi dengan elemen lain.
Semua Properti CSS Margin
PropertiDeskripsi
marginMengatur semua properti margin dalam satu deklarasi
margin-bottomMengatur margin bawah sebuah elemen
margin-leftMengatur margin kiri sebuah elemen
margin-rightMengatur margin kanan sebuah elemen
margin-topMengatur margin atas sebuah elemen

Nilai yang diizinkan
NilaiDeskripsi
autoBrowser mengatur margin
Hasilnya ditentukan browser
lengthMargin 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
PropertiDeskripsi
paddingMengatur semua properti padding dalam satu deklarasi
padding-bottomMengatur padding bawah sebuah elemen
padding-leftMengatur padding kiri sebuah elemen
padding-rightMengatur padding kanan sebuah elemen
padding-topMengatur padding kanan sebuah elemen
Nilai yang diizinkan
nilaiDeskripsi
lengthpadding 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

Komentar

Posting Komentar

Postingan populer dari blog ini

Penilaian (Definisi, Prinsip dan Tujuan)

Penilaian Portofolio (Definisi, Karakteristik, Kelebihan dan Kekurangan)