CSS Outline Property

Sekalipun outline properties mempunyai value yang sama dengan border dan juga mampu memberikan hasil seperti layaknya border, namun anda harus berhati-hati saat menggunakan outline property. CSS outline property tak bisa dimasukkan sebagai bagian dari box, sekalipun outline selalu berada disekeliling box (posisinya berada setelah content, padding dan border). Dia seperti sebuah bayangan yang mampu menabrak apapun tanpa menggeser unsur/box/bidang yang ada disekelilingnya. Jika boleh dikatakan, outline property seperti sebuah elemen dengan absolute position.

Cara penulisan outline property

outline: style | color | width;

CSS Border Properties

CSS Border Properties menjadi satu unsur yang hampir tidak pernah lepas dari css box model. Border properties banyak dmanfaatkan untuk memperindah box, membedakan sebuah box dengan box lain serta memperjelas batas sebuah box. Ada tiga properti css border yang masing-masing mengatur ketebalan border, warna border dan style border. Masing masing dapat digunakan di ke-empat sisi box (top, right, bottom dan left).

• border-width property :
  border-width property berfungsi untuk mengatur ketebalan border. Ada beberapa satuan Value/nilai yang bisa dipergunakan seperti pixel, pt, em, thick, thin, medium dll.

CSS Padding Properties

Padding adalah bagian yang tak terpisahkan yang sangat penting dalam desain web/blog. Posisi padding berada antara border dan content (jika menggunakan border). Memanfaatkan padding adalah salah satu cara untuk dapat memperoleh penataan desain yang rapi dan menarik, selain menjadi batas pemisah antara content dengan unsur lain dalam blog/web. Dalam perhitungan, padding termasuk bagian dari ukuran sebuah box, setelah content dan border. Jika dibuat dalam bentuk perhitungan akan seperti ini:

Menghitung ukuran box

mybox{
      width:200px;
      height:100px;
      border:10px solid grey;
      padding:10px 15px 5px 70px;
      margin:25px 10px;
}

CSS Margin Properties

Properti css "margin" pada intinya berfungsi sebagai pengatur jarak sebuah box/kotak dalam desain web/blog dengan elemen lainnya agar sebuah blog/web dapat tertata dengan baik. Properti margin merupakan unsur terluar box setelah border, padding dan content. Nilai/value margin dapat menggunakan prosentase, auto, inherit, atau satuan lain dalam bentuk pixel (px), pt dan em. Secara umum satuan yang paling sering digunakan adalah pixel. Margin bersifat melingkupi sebuah box sehingga pengaturan margin dapat dilakukan dari 4 (empat) sisi berbeda.

• margin-top : untuk mengatur jarak dengan unsur lain disebelah atas.
• margin-right : untuk mengatur jarak dengan unsur lain disebelah kanan.
• margin-bottom : untuk mengatur jarak dengan unsur lain disebelah bawah.
• margin-left : untuk mengatur jarak dengan unsur lain disebelah kiri.

CSS Box Model

CSS Box Model adalah salah satu unsur dasar yang sangat penting dalam desain blog yang harus dipahami dengan baik. Hampir semua bagian blog/web dikenali sebagai "box atau kotak" yang didalamnya terdiri atas margin, border, padding dan content. Box atau kotak ini menjadi sangat akrab di telinga blogger bukan saja karena setiap saat selalu terdengar atau terbaca dan bahkan bersentuhan, namun memang istilah ini menjadi istilah pokok dalam dunia per-blogger-an. Anda pasti amat sering mendengar istilah kotak komentar atau comment box, kotak widget, kotak/boks posting, box edit html, kotak pencarian, serta beberapa istilah lain yang selalu diawali dengan kata boks/kotak. Box atau dalam bahasa Indonesia dikenal sebagai "kotak" atau "boks" terdiri atas 4 unsur: