Kupas Sampai Tuntas

Model format CSS berasumsi bahwa tiap-tiap elemen dikelilingi oleh tiga area yang berbeda. Dimulai dari dalam keluar, area ini adalah padding, border, dan margin. Masing-masing entitas ini dapat diatur melalui spesial properties CSS, mengijinkan para developer untuk secara singkat mengatur tampilan dan posisi dari setiap elemen HTML. Nilai margin (garis tepi) dapat kita atur besar dan letaknya melalui properti “margin-top”, “margin-bottom”, “margin-right”, dan “margin-left”, dan ditetapkan seperti ini: DIV {margin-top: 10px; margin-bottom: 10px; margin-right: 5px; margin-left: 5px} /* 10px width for horizontal margins, 5px width for vertical margins */ You can also use the catch-all "margin" property DIV {margin: 10px 5px 5px 10px} /* specify widths clockwise */ or set a uniform margin width with DIV {margin: 10px} /* equal width for all margins */ Anda dapat menyesuaikan lebar border dengan properties self-explanatory “border-top-width”, “border-left-width”, dan “border-rigth-width”, atau dengan menata suatu borde dengan shorcut properti “border-width”. Coba perhatikan sekali lagi! DIV {border-top-width: 50px; border-right-width: 100px; border-bottom-width: 75px; border-left-width: 125px} /* different width for each border */ DIV {border-width: 50px} /* equal width for all borders */ You can also specify border widths with the keywords "thick", "medium", "thin" and "none", like this: DIV {border-top-width: thick; border-right-width: medium; border-bottom-width: thin; border-left-width: none} DIV {border-width: thick} Dan akhirnya, padding dapat diatur dengan.. ya bener, anda telah menduganya! Properti “padding-top”, “padding-bottom”, “padding-right”, dan “padding-left”. Untuk ini penulis tidak usah mencontohkannya, anda coba saja sendiri! Hehehe.. bukan malas, menghemat kertas adalah jawaban bijaknya ☺ CSS juga mengijinkan anda untuk mengatur warna border anda dengan properties “border-color”. Contoh di bawah akan menunjukkan bagaimana “border-color” bekerja!