RSS

Mengatur Margin dan Padding di Blog

Mengatur Margin dan Padding di Blog - Padding dan Margin adalah suatu aturan penulisan dan penempatan dalam Blog yang tidak bisa di tinggalkan. Seperti halnya dalam microsoft Word, Margin adalah Batas dan Padding adalah Jarak.

Jika kita ingin membuat postingan kita berkolom kita memakai padding dan Margin ini dalam pengaturan lebar dan jarak Postingan 1 dengan yang lainnya.
Mengatur Margin dan Padding di Blog
Mengatur Margin dan Padding di Blog
Mengatur Margin dan Padding di Blog
Mengatur Margin dan Padding di Blog
Contoh diatas memakai script berikut ini :


<div style="float: left; width: 100%;">
<div style="float: left; text-align: center; width: 25%;">
<div style="margin: 10px; padding: 10px;">
Mengatur Margin dan Padding di Blog</div>
</div>
<div style="float: left; text-align: center; width: 25%;">
<div style="margin: 10px; padding: 10px;">
Mengatur Margin dan Padding di Blog</div>
</div>
<div style="float: left; text-align: center; width: 25%;">
<div style="margin: 10px; padding: 10px;">
Mengatur Margin dan Padding di Blog </div>
</div>
<div style="float: left; text-align: center; width: 25%;">
<div style="margin: 10px; padding: 10px;">
Mengatur Margin dan Padding di Blog</div>
</div>
</div>
Jika ingin merubah menjadi lebih merapatkan jarak antara kolom satu dengan yang lain, anda bisa merubah ukuran padding dan Marginnya. Silahkan berExperimen.
margin: 10px 0 10px 10px;
Mengatur Margin dan Padding di Blog 2 kolom
Mengatur Margin dan Padding di Blog 2 kolom

Anda bisa memodifikasi postingan menjadi 2 kolom seperti diatas.
<div style="float: left; width: 100%;">
  <div style="float: left; margin: 30px; padding: 30px; width: 170px;">
    Kolom 1 & Text 1
  </div>
  <div style="float: right; margin: 30px; padding: 30px; width: 170px;">
    Kolom 2 & Text 2
  </div>
</div>
Sesuaikan Margin dan padding nya untuk memperkecil jarak.
Sekian dulu sampek disini nulis ininya, hee udah saatnya beraktifitas..

Dukung saya di Contest Blog " HMPS TI Unikama dan Kampus Multikultural " dengan memberi komentar di artikel saya, thanks.

0 komentar:

Posting Komentar