Pada kesempatan hari ini saya akan mengulang kembali tentang dasar dasar css di W3School agar saya lebih memahaminya lagi, yaitu tentang Border, margin dan padding.
- Border adalah tepi yang dapat digunakan untuk banyak hal, misalnya sebagai elemen dekoratif atau untuk memberi garis batas pemisah dari dua hal.
Contoh :
garisnya kalau gambar di atas tadi saya kasih ketebalan.
- Margin adalah ruang disekitar elemen/konten. Margin akan membentuk daerah
(ruang) vertikal dan horizontal antara elemen. Jika elemen/konten tidak
memilki margin, maka elemen-elemen tersebut akan rapat bertemu terhadap
satu sama lain. Agar margin bekerja dengan baik, elemen biasanya diikuti
oleh posisi float atau diposisikan relative. Style ini sering
diterapkan untuk dapat memindahkan elemen lain di sekitarnya.
<style>
p.one {
border: 7px solid red;
background-color: yellow;
margin-top: 80px;
margin-bottom: 80px;
margin-right: 80px;
margin-left: 80px;
padding-top: 100px;
padding-right: 50px;
padding-bottom: 100px;
padding-left: 80px;
}
</style>
Keterangan :
margin-bottom = jarak bawah dengan yang tengah.
margin-top = jarak atas dengan yang tengah
margin-right =jarak kanan dengan yang tengah
margin-left = jarak kiri dengan yang tengah
- Padding adalah ruang horizontal dan vertikal yang diatur di sekitar area isi/konten dari elemen yang ditargetkan. Jadi padding di bagian dalam kotak, bukan di luar.
Contoh :
p.one {
border: 7px solid red;
background-color: yellow;
margin-top: 80px;
margin-bottom: 80px;
margin-right: 80px;
margin-left: 80px;
padding-top: 100px;
padding-right: 50px;
padding-bottom: 100px;
padding-left: 80px;
}
</style>
Keterangan :
padding-top = jarak atas dengan margin
padding-right = jarak kanan dengan margin
padding-bottom = jarak bawah dengan margin
padding-left = jarak kiri dengan margin
Ini hasil saya belajar css border,margin dan padding dan sudah sedikit saya
edit :
<!DOCTYPE html>
<html>
<head>
<style>
p.css{
background-color: yellow ;
border: 6px solid red ;
border-top-right-radius: 5em;
border-top-left-radius: 5em;
border-bottom-left-radius: 5em;
border-bottom-right-radius: 5em;
margin-top: 80px;
margin-bottom: 80px;
margin-right: 80px;
margin-left: 80px;
padding-top: 100px;
padding-right: 80px;
padding-bottom: 100px;
padding-left: 120px;
border-style: solid;
}
</style>
</head>
<body bgcolor="grey">
<h2> Belajar CSS border,margin and Padding :</h2>
<p class="css">Di sini adalah tempat padding</p>
<p class="one"></p>
</body>
</html>
Kalau kurang puas silahkan belajar sendiri di W3School sekian dulu postingan dari saya semoga bermanfaat bagi anda semua.
Wasslamualaikum Wr.Wb
0 komentar:
Posting Komentar