google-site-verification=UES8Z0aRJbtE1Gb4ZyHBN69EWU5404X-VqbouzRkOVI Memahami Margin, Padding Dan Border - PUSATRIK.COM

Memahami Margin, Padding Dan Border

kode HTML dan CSS, tidak harus jago tapi setidaknya mengerti dasar - dasarnya saja sudah cukup semoga kita sanggup mengatur dan mengolah blog kita semoga sesuai dengan selera dan harapan kita.

Dalam dunia blog, terlebih dikala kita akan mengkustomisasi template blog, kita niscaya sering sekali menemui sebuah atribut yang berjulukan "Margin, Padding dan Border" yang kadang terletak di setiap elemen yang akan kita edit. Apalagi ketika kita ingin membuat tema blog dari nol, niscaya dalam mengatur tata letak dan merapihkan tampilan tema dasar kita harus memakai atribut ini.

Untuk itu, pada kesempatan kali ini, sebagai pembelajaran buat aku khususnya semoga lebih sanggup memahami atribut tersebut, aku ingin mencoba memaparkannya melalui goresan pena ini. Semoga kita sanggup bersama - sama berguru di sini. Oh ya, buat teman sekalian apabila nanti ada yang keliru dalam penyampaian saya, aku harap teman sekalian berkenan untuk memberi koreksi melalui kolom komentar.

Sebelum kita mulai membahas mengenai "Memahami Margin, Padding dan Border", aku ingin memberikan metode aku dalam memberikan bahan ini.

Agar gampang untuk memahami dan melook perbedaan dalam setiap sampel yang aku sampaikan, maka setiap sampel yang aku sampaikan akan aku sajikan menggunakan media gambar, di mana gambar tersebut mewakili sebuah teks / isi / konten yang mendapat properti berupa "Margin, Padding atau Border". Adapun gambar yang akan sering teman look dalam setiap sampel ialah menyerupai di bawah ini:

 sebagai seorang blogger seyogyanya kita harus sanggup sedikit memahami tantang  Memahami Margin, Padding dan Border

Sobat, alasan aku dalam memberikan sampel pada tutorial ini untuk memakai sebuah gambar ialah alasannya ialah pada sebuah gambar itu lebih gampang bagi kita untuk melook batas di setiap sisinya, baik atas, bawah, kanan ataupun kiri. Tidak menyerupai memakai sebuah teks atau goresan pena yang akan menciptakan kita sulit untuk melook sisi sebelah kanan, lebih - lebih apabila teks tersebut hanya terdiri dari beberapa kalimat saja dan bukan sebuah paragraf.

Oke, mari kita mulai pembahasan kita.

Margin.

Sobat, definisi niscaya dari margin bersama-sama aku sendiri kurang begitu faham, tapi dari segi terjemahannya margin mempunyai arti "batas", jadi bila dikaitkan sanggup kita ambil kesimpulan bahwa pengertian margin ialah "area batas terluar" sebuah konten yang berfungsi untuk memisahkan (memberi jarak) area konten dari elemen lain pada sebuah halaman HTML.

Margin merupakan nilai sebuah properti style (css) dalam sebuah halaman HTML, cara useran dan penerapannya sanggup dengan cara:

  1. Inline (sebaris dengan tag HTML)
  2. sampel:

    <p style="margin: 7px">Isi / Main / Konten</p>

  3. Onpage (css yang diletakkan dalam tag <style> pada elemen <head> sebuah halaman HTML)
  4. Contoh:
    p {     margin: 7px;  }
  5. Outpage (penerapannya sama menyerupai Onpage, hanya saja di letakkan di luar halaman HTML)
Margin tidak mempunyai nilai warna alias transparan, jadi warna area margin sesuai dengan warna latar belakang (background) elemen induknya, sedangkan untuk ukurannya sanggup teman tulis memakai ukuran satuan diktatorial atau relatif.

Ukuran satuan diktatorial antara lain:
  • in = Inchi
  • cm = Senti meter
  • mm = Mili meter
  • pt = Point (1pt = 0.139 inchi)
  • pc = Pica (1pc = 12pt)

Sedangkan ukuran satuan relatif antara lain:
  • px = Pixel (satu titik gambar yang paling kecil dari sebuah layar, tergantung dari resolusi layar)
  • % = Persen
  • em = Ukuran yang nilainya sama dengan ukuran font element induk
  • ex = Ukurannya setara dengan 0,5em
Cara penulisan margin.

Setiap elemen HTML mempunyai empat (4) sisi, yaitu sisi sebelah atas, kanan, bawah dan kiri. Dari setiap masing - masing sisi sanggup kita beri margin yang berbeda ukurannya tergantung dari kebutuhan.

1. Margin dengan ukuran berbeda pada setiap sisinya.
Contoh:
    <p style="margin: 20px 30px 50px 40px;">Isi / Main / Konten</p>

Dari sampel di atas (ukuran dibaca searah jarum jam dari atas, kanan, bawah dan kiri) akan terlook menyerupai di bawah ini:

 sebagai seorang blogger seyogyanya kita harus sanggup sedikit memahami tantang  Memahami Margin, Padding dan Border


    Keterangan:
  • Garis titik - titik merah = Batas dari total lebar halaman HTML (elemen induk / elemen lain).
  • Warna biru = Batas atas, kanan, kiri dan bawah sebuah konten.
  • Warna putih = Lebar margin sesuai ukuran yang kita tulis pada style (warna putih sesuai background induknya).
Dari atribut style margin (kode HTML inline) pada sampel diatas sanggup juga kita tulis sebagai css dengan rincian:

p {    margin: 20px 30px 50px 40px; } 

Atau sama juga bila kita tulis dengan aba-aba css dibawah ini:

p {    margin-top: 20px;    margin-right: 30px;    margin-bottom: 50px;    margin-left: 40px; } 

2. Margin dengan ukuran yang sama pada setiap sisinya.

Apabila margin yang kita inginkan mempunyai ukuran yang sama pada setiap sisinya, maka cukup tuliskan satu ukuran saja dan ukuran tersebut akan berlkami untuk semua sisi, baik atas, kanan, kiri ataupun bawah.
Contoh:
    <p style="margin: 20px">Isi / Main / Konten</p>

Untuk css:
p {    margin: 20px; } 

3. Margin dengan ukuran yang sama pada masing - masing 2 sisi.

Apabila kita menginginkan ukuran margin sama pada setiap 2 sisinya, yaitu atas = bawah dan kiri = kanan, sebagai sampel kita ingin margin atas dan bawah 40px sedangkan kiri dan kanan 30px, maka cara kita menulisnya akan menyerupai ini:
Contoh:
    <p style="margin: 40px 30px">Isi / Main / Konten</p>

Untuk css:
p {    margin: 30px 40px; } 

Keterangan: Ukuran yang pertama (30px) untuk mengatur margin atas dan bawah, sedangkan yang kedua (40px) untuk margin kiri dan kanan.

4. Penulisan Margin dengan 3 ukuran saja.

Apabila teman menuliskan nilai ukuran margin dengan 3 poin saja menyerupai ini:
    <p style="margin: 10px 30px 50px">Isi / Main / Konten</p>

Atau bila dalam css akan menyerupai ini:
p {    margin: 10px 30px 50px; } 

Maka ukuran di atas akan terbaca 10px untuk sisi atas, 30px sisi kanan dan kiri sedangkan 50px sisi bawah. Dan akan terlook menyerupai ini:

 sebagai seorang blogger seyogyanya kita harus sanggup sedikit memahami tantang  Memahami Margin, Padding dan Border



5. Menggunakan Margin untuk mengatur posisi konten semoga berada sempurna di tengah - tengah.

Properti margin juga berfungsi untuk mengatur posisi sebuah konten semoga sempurna berada di tengah - tengah area halaman. Jadi, apabila teman ingin mengatur sebuah konten semoga posisinya sempurna di tengah - tengah sebuah halaman / area, maka teman harus memakai properti margin ini, dan memberi nilai "0 auto" pada margin.

Contoh:

p {    width: 75%;    margin: 0 auto; }

Dan balasannya posisi konten yang kita buat akan berada di tengah -tengah menyerupai gambar di bawah ini.

 sebagai seorang blogger seyogyanya kita harus sanggup sedikit memahami tantang  Memahami Margin, Padding dan Border



Padding.

Padding secara bahasa mempunyai arti "lapisan". Sedangkan dalam istilah bahasa HTML padding ialah area yang berfungsi memberi "jarak dalam" pada sebuah elemen untuk melapisi isi / main / konten.

Padding juga tidak mempunyai nilai warna akan tetapi warna pada padding dipengaruhi oleh warna background elemen yang dikandungnya (bukan induknya) tidak menyerupai margin yang warnanya sesuai dengan elemen induknya.

Adapun satuan ukuran, cara penerapan dan cara penulisan padding sama persis dengan margin. Kaprikornus sanggup teman look kembali uraian margin di atas, dan ganti goresan pena margin dengan padding untuk mengaplikasikannya.

Agar lebih terperinci kita buat satu sampel useran padding menyerupai dibawah ini:
Contoh:
    <p style="padding: 20px 30px 50px 40px; background: lime;">Isi / Main / Konten</p>

Untuk css menyerupai ini:

p {    padding: 20px 30px 50px 40px;    background: lime; } 

Atau sama juga bila kita tulis dengan aba-aba css dibawah ini:

p {    padding-top: 20px;    padding-right: 30px;    padding-bottom: 50px;    padding-left: 40px;    background: lime; } 

Dan akan terlook menyerupai di bawah ini:

 sebagai seorang blogger seyogyanya kita harus sanggup sedikit memahami tantang  Memahami Margin, Padding dan Border


    Keterangan:
  • Garis titik - titik merah = Batas dari total lebar halaman HTML (elemen induk / elemen lain).
  • Warna biru = Batas atas, kanan, kiri dan bawah sebuah konten.
  • Warna hijau = Lebar padding sesuai ukuran yang kita tulis pada style.

Pada sampel padding di atas (di dalam area garis titik - titik warna merah) tidak terdapat area warna putih alasannya ialah memang tidak terdapat margin di dalamnya. Sekarang coba kita tambahkan nilai margin pada sampel di atas, maka css kita tulis menyerupai ini:

p {    padding: 20px 30px 50px 40px;    background: lime;    margin: 20px; } 

Hasilnya akan terlook menyerupai ini:

 sebagai seorang blogger seyogyanya kita harus sanggup sedikit memahami tantang  Memahami Margin, Padding dan Border


Oke, semoga sanggup teman pahami. Silahkan utak - atik sendiri semoga lebih paham dan tinggalkan pesan lewat kolom komentar bila ada yang ingin didiskusikan.

Border atau Garis.

Border adalah satu properti dalam sebuah halaman HTML yang berfungsi untuk mengvisualkan batas pada elemen yang berupa sebuah garis, yang letaknya berada di antara margin dan padding (sisi dalam margin dan sisi luar padding).

Untuk menambahkan properti border atau garis pada sebuah tag HTML kita sanggup menuliskan tiga (3) nilai sekaligus pada properti border tersebut, yaitu width, style dan color, untuk mengatur ukuran (lebar), bentuk dan warna garis. seperti: p {border: 4px solid red;}

Agar lebih jelasnya, mari kita terapkan pada sebuah sampel visual menyerupai penulisan css di bawah ini:

p {    padding: 20px 30px 50px 40px;    background: lime;    margin: 20px;    border: 4px solid red; } 

Maka akan menawarkan hasil tampilan menyerupai di bawah ini:

 sebagai seorang blogger seyogyanya kita harus sanggup sedikit memahami tantang  Memahami Margin, Padding dan Border


Semoga dari sampel visual di atas sudah sanggup teman pahami secara garis besar wacana maksud dari property border yang telah aku sampaikan

Dari sampel di atas sanggup teman look bahwa border mempunyai tiga nilai, yaitu 3px (menunjukkan width / lebar garis - berlkami untuk keempat sisi), solid (menunjukkan style / bentuk garis) dan red (menunjukkan color / warna garis). Dan dari ketiga nilai tadi sanggup kita pisahkan atau kita uraikan macam - macam properti border.

Macam - macam Property Border.

Ada beberapa macam properti border yang sanggup kita gunakan dalam mengatur tampilan sebuah garis. Dan masing - masing property ini juga pastinya mempunyai nilai dan fungsi yang berbeda. Di antara properti border yang akan aku sampaikan nanti ialah width, style, color dan radius.

Oke, mari kita bahas bersama wacana properti border.

1. Border Width.

Properti border pertama yang akan kita bahas ialah "width atau lebar". Properti ini berfungsi untuk mengatur ketebalan atau lebar garis. Dan secara default tanpa kita menuliskan kata "width" pada style (css) borowser akan tetap sanggup menerjemahkan sebuah nilai 3px (seperti sampel di atas) sebagai nilai lebar garis.

Cara penulisan nilai lebar sebuah border sedikit berbeda dari penulisan margin dan padding apabila kita menginginkan lebar yang berbeda di setiap sisinya. Bila pada margin atau padding kita sanggup pribadi menuliskan " margin/padding: 20px 30px 50px 40px; " untuk keempat ukuran sisi yang berbeda, tetapi bila pada border kita harus merinci satu persatu setiap sisinya, kita tidak sanggup menulis dengan aba-aba menyerupai ini "border-width: 20px 30px 50px 40px" atau "border: 20px 30px 50px 40px" tetapi harus:

p {    padding: 20px 30px 50px 40px;    background: lime;    margin: 20px;    border-top: 20px;    border-right: 30px;    border-bottom: 50px;    border-left: 40px;    border-style: solid;    border-color: red; } 

Dan balasannya akan menyerupai ini:

 sebagai seorang blogger seyogyanya kita harus sanggup sedikit memahami tantang  Memahami Margin, Padding dan Border



2. Border Style.

Border style adalah properti border untuk mengatur bentuk garis pada elemen HTML sesuai style yang kita sukai.

Penulisan:   <p style="border: 3px;border-color: blue; border-style: solid"  > Isi </p>   

Ada beberapa macam nilai border style yang sanggup teman gunakan, di antaranya:

1. Border Style Solid.

  Bentuk garis tebal, terperinci dan terlook padat (solid).


2. Border Style Dotted.

  Bentuk garis terlook titik - titik (dotted).


3. Border Style Dashed

  Bentuk garis terlook putus - putus (dashed).


4. Border Style Double

  Bentuk garis terlook gkamu (double).


5. Border Style Inset

  Bentuk garis dengan imbas warna (tergantung set warna) (inset).


6. Border Style Outset

  Bentuk garis dengan imbas warna (tergantung set warna) (outset).


7. Border Style Ridge

  Bentuk garis dengan imbas garis punggung (tergantung set warna) (ridge).


8. Border Style Groove

  Bentuk garis dengan alur (tergantung set warna) (groove).



3. Border Color.

Untuk warna garis kita sanggup memakai properti "border-color", adapun cara penulisannya telah aku sampaikan pada uraian yang di atas.

Ada banyak warna yang sanggup teman pilih untuk mempercantik tampilan web atau blog sobat, sedangkan untuk menulisnya, teman sanggup memasukkan nama warna yang teman inginkan menyerupai "red, blue, lightgrey dll. (dalam bahasa inggris)" atau juga sanggup dengan menuliskan aba-aba hex menyerupai #ff0000 (merah), #0000ff (biru), #d3d3d3 (lightgrey) dll. Untuk menemukan nama atau aba-aba warna yang teman inginkan, silahkan teman kunjungi halaman ini.

Berikut ini ialah sampel struktur HTML untuk mewarnai garis (border-color):   <p style="border: 1px solid red"> Isi </p>   atau
  <p style="border: 1px solid; border-color: #000ff"> Isi </p>  

Setelah uraian panjang lebar yang telah aku sampaikan di atas, kita sanggup menggabungkan aba-aba - aba-aba yang telah aku sebutkan tadi menjadi sebuah style inline tag HTML menyerupai berikut ini:
      <p style="padding: 20px 30px 50px 40px; background: lime; margin: 20px; border-top: 3px solid red; border-right: 10px double grey; border-bottom: 4px dotted blue; border-left: 15px dashed yellow">Isi / Main / Konten</p> 

Atau dalam bentuk css menyerupai ini:

p {  padding: 20px 30px 50px 40px;  background: lime;  margin: 20px;  border-top: 3px solid red;  border-right: 10px double grey;  border-bottom: 4px dotted blue;  border-left: 15px dashed yellow; } 

Maka akan menawarkan hasil tampilan menyerupai di bawah ini:

 sebagai seorang blogger seyogyanya kita harus sanggup sedikit memahami tantang  Memahami Margin, Padding dan Border



4. Border Radius.

Border Radius adalah sebuah properti border yang berfungsi untuk memberi imbas melengkung pada setiap sudut garis.

Pada umumnya properti border yang di tambahkan sebagai style sebuah tag HTML akan mempunyai bentuk stkamur yaitu siku ( 90o ) di keempat sudutnya, apabila teman ingin mengubah bentuk stkamur tersebut, maka teman sanggup menambahkan properti border-radius untuk merubah semua sudutnya atau hanya salah satu sudutnya saja.

Agar tidak bertele - tele, mari kita praktekkan langsung.

Ini ialah bentuk stkamur sebuah border:

p {    padding: 20px 30px 50px 40px;    background: lime;    margin: 20px;    border: 4px solid red; } 

Akan terlook bentuk stkamur yaitu siku ( 90o ) di keempat sudutnya menyerupai terlook di bawah ini:

 sebagai seorang blogger seyogyanya kita harus sanggup sedikit memahami tantang  Memahami Margin, Padding dan Border


Dan kini aku ingin merubah bentuk sudutnya dari siku menjadi melengkung, dan tinggal kita tambahkan "border-radius" pada stylenya menyerupai ini:

p {    padding: 20px 30px 50px 40px;    background: lime;    margin: 20px;    border: 4px solid red;    border-radius: 17px; } 

Sekarang sudutnya akan terlook menyerupai di bawah ini:

 sebagai seorang blogger seyogyanya kita harus sanggup sedikit memahami tantang  Memahami Margin, Padding dan Border



Selain menciptakan sudut lengkung, dengan memakai properti border radius ini kita juga sanggup menciptakan sebuah konten / media menjadi bentuk bulat.

Caranya: Konten / media yang ingin kita bentuk menjadi bundar harus berbentuk persegi empat (sama sisi) kemudian berikan nilai 100% pada properti border radius.

Contoh:
Contoh ini memperlihatkan sebuah bentuk bulat.
Contoh ini memperlihatkan sebuah bentuk bulat.
Contoh ini memperlihatkan sebuah bentuk bulat.
Nilai (dalam css) yang aku gunakan untuk menciptakan sampel di atas adalah:

p {    width:100px;    height:100px;    margin: 10px;    padding: 20px;    background: lime;    border:9px groove red;    border-radius: 100%; }

Ketiga sampel di atas hanya berbeda pada properti border, sedangkan pada sampel yang pertama aku tidak memakai properti border.

Selain untuk menciptakan bentuk bundar menyerupai sampel di atas, teman juga sanggup menciptakan bentuk - bentuk yang lain memakai properti border radius kemudian tinggal sesuaikan saja nilai pada setiap sudutnya.


Penulisan Nilai Border Radius

Letak penulisan nilai keempat sudut dari properti border radius hampir sama dengan penulisan nilai margin dan padding. Bila di urutkan dari sisi atas, kanan, bawah dan kiri pada margin dan padding, maka letak nilai sudut properti border radius ialah sebagai berikut:
  • Atas = border-top-left-radius.
  • Kanan = border-top-right-radius.
  • Bawah = border-bottom-right-radius.
  • Kiri = border-bottom-left-radius.

Untuk sanggup lebih memahami, silahkan teman perhatikan sampel - sampel di bawah ini:

Contoh Satu:
border-radius: 17px 0px;

Sama dengan:

border-top-left-radius:17px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius:17px;
Contoh Dua:
border-radius: 0px 17px;

Sama dengan:

border-top-left-radius: 0px;
border-top-right-radius:17px;
border-bottom-left-radius:17px;
border-bottom-right-radius: 0px;
Contoh Tiga:
border-radius: 0px 17px 17px 0px;

Sama dengan:

border-top-left-radius: 0px;
border-top-right-radius:17px;
border-bottom-left-radius: 0px;
border-bottom-right-radius:17px;
Contoh Empat:
border-radius: 17px 0px 0px 17px;

Sama dengan:

border-top-left-radius:17px;
border-top-right-radius: 0px;
border-bottom-left-radius:17px;
border-bottom-right-radius: 0px;
Contoh Lima:
border-radius: 0px 17px 0px 17px;

Sama dengan:

border-top-left-radius: 0px;
border-top-right-radius:17px;
border-bottom-left-radius:17px;
border-bottom-right-radius: 0px;
Contoh Enam:
border-radius: 17px 0px 17px 0px;

Sama dengan:

border-top-left-radius:17px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius:17px;

Setelah panjang lebar bahan ini aku sampaikan, sebagai latihan, silahkan teman buat sendiri sebuah elemen HTML yang sanggup memperlihatkan hasil menyerupai sampel di bawah ini.

BENTUK BORDER RADIUS

 sebagai seorang blogger seyogyanya kita harus sanggup sedikit memahami tantang  Memahami Margin, Padding dan Border


Silahkan sharing melalui kolom komentar apabila teman telah berhasil dalam latihan ini. Happy day to you all...

Sebagai penutup, semoga yang telah aku sampaikan sanggup memberi manfaat kepada kita semua.

Share, like dan komentar dari teman sangat memberi arti untuk blog ini. Semoga bermanfaat dan sukses selalu untuk kita semua. Aamiin...



Sumber http://yang-bermanfaat.blogspot.com

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel