#8 CSS – Margin & Padding

Margin merupakan spasi/ruang kosong di luar suatu elemen, sedangkan Padding merupakan spasi diantara border dan element/content.

Kita akan membuat class div dengan memberikan margin dan padding.
Berikut file index.html :

<!DOCTYPE html>
<html>

<head>
    <title>margin dan Padding</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <h1>Margin dan Padding</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem ab vel qui quisquam atque doloribus quo aut
        impedit repellat, ducimus commodi obcaecati ea itaque porro pariatur ut. Rerum, debitis ea!</p>
    <div class="div">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio, sint repellendus, sit quam, optio minus
            recusandae corrupti impedit ad praesentium officia a nulla quo non explicabo saepe quae itaque debitis?</p>
    </div>

</html>

File style.css

.div {
    margin: 30px;
    padding: 20px;
    width: 200px;
    background-color: aqua;
    border-style: solid;
}
margin dan padding

margin 30 px dan padding 20px memiliki arti bahwa keempat sisi margin dan padding memiliki ukuran yg sama yaitu 30px untuk margin dan 20px untuk padding. Kita bisa memberikan ukuran yang berbeda terhadap setiap sisi dengan menggunakan property :

Untuk margin :

margin-bottomUntuk mengatur margin sisi bawah
margin-leftUntuk mengatur margin sisi kiri
margin-right Untuk mengatur margin sisi kanan
margin-top Untuk mengatur margin sisi atas

Untuk padding :

padding-bottom Untuk mengatur padding sisi bawah
padding-left Untuk mengatur padding sisi kiri
padding-right Untuk mengatur padding sisi kanan
padding-top Untuk mengatur padding sisi atas

Tinggalkan sebuah komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *