CSS Padding
CSS Padding menciptakan ruang didalam suatu elemen.
padding: mengatur area padding disetiap sisi.
/* Contoh */
padding: 50px;
padding-top: mengatur area padding dibagian atas.
/* Contoh */
padding-top: 50px;
padding-right: mengatur area padding dibagian kanan.
/* Contoh */
padding-right: 50px;
padding-bottom: mengatur area padding dibagian bawah.
/* Contoh */
padding-bottom: 50px;
padding-left: mengatur area padding dibagian kiri.
/* Contoh */
padding-left: 50px;
Contoh: css
.contoh-padding {
padding-top: 30px;
padding-right: 50px;
padding-bottom: 70px;
padding-left: 90px;
background: white;
border: 2px solid pink;
}
Atau:
css
.contoh-padding{
padding: 30px 50px 70px 90px;
background: white;
border: 2px solid pink;
}
html
<div class="contoh-padding" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
Hasilnya akan sama seperti ini.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
padding
css
.contoh-padding2 {
padding: 90px;
background: white;
border: 2px solid pink;
}
html
<div class="contoh-padding2" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
padding-left
css
.contoh-padding_left {
padding-left: 90px;
background: white;
border: 2px solid pink;
}
html
<div class="contoh-padding_left" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
padding-top
css
.contoh-padding_top {
padding-top: 90px;
background: white;
border: 2px solid pink;
}
html
<div class="contoh-padding_top" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
padding-left
css
.contoh-padding_right {
padding-right: 90px;
background: white;
border: 2px solid pink;
}
html
<div class="contoh-padding_right" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
padding-bottom
css
.contoh-padding_bottom {
padding-bottom: 90px;
background: white;
border: 2px solid pink;
}
html
<div class="contoh-padding_bottom" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.