Tutorial CSS 18 : Pengaturan Dimensi HTML dengan CSS

0 Masagunglearning Minggu, 09 Oktober 2016 Edit this post

Tutorial CSS kali ini membahas Pengaturan Dimensi HTML dengan CSS. Anda telah melihat perbatasan yang mengelilingi setiap kotak

Tutorial CSS kali ini membahas Pengaturan Dimensi HTML dengan CSS. Anda telah melihat perbatasan yang mengelilingi setiap kotak. elemen, padding yang dapat muncul dalam setiap kotak dan margin yang bisa pergi di sekitar mereka. Dalam tutorial ini kita akan bagaimana kita dapat mengubah dimensi kotak.

Hal ini memiliki sifat-sifat berikut yang memungkinkan Anda untuk mengontrol dimensi kotak.

Properti height digunakan untuk mengatur ketinggian kotak.
Properti width digunakan untuk mengatur lebar kotak.
Properti line-height digunakan untuk mengatur tinggi dari baris teks.
Properti max-height digunakan untuk mengatur ketinggian maksimum yang kotak dapat.
Properti min-height digunakan untuk mengatur tinggi minimum yang kotak dapat.
Properti max-width digunakan untuk mengatur lebar maksimum yang kotak dapat.
Properti min-width digunakan untuk mengatur lebar minimum yang kotak dapat.

Properti Height and Width

Tinggi dan lebar sifat memungkinkan Anda untuk mengatur tinggi dan lebar untuk kotak. Mereka dapat mengambil nilai-nilai dari panjang, persentase, atau auto kata kunci.
Berikut adalah contoh :


<html>

   <head>

   </head>

   <body>

      <p style="width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">

This paragraph is 400pixels wide and 100 pixels high

   </p>

   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Properti line-height

Properti line-height memungkinkan Anda untuk meningkatkan ruang antara baris teks. Nilai properti line-height bisa menjadi nomor, panjang, atau persentase.
Berikut adalah contoh :


<html>

   <head>

   </head>

   <body>

      <p style="width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;">

This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.

This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.

      </p>

   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Properti max-height

Properti max-height memungkinkan Anda untuk menentukan tinggi maksimum kotak. Nilai properti max-height bisa menjadi nomor, panjang, atau persentase.
CATATAN - Properti ini tidak bekerja baik Netscape 7 atau IE 6.
Berikut adalah contoh -


<html>

   <head>

   </head>  

   <body>

      <p style="width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;">

This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px

This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px

      </p>

      <br>

      <br>

      <br>

      <img alt="logo" src="/css/images/logo.png" width="195" height="84" />

   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Properti min-height

Properti min-height memungkinkan Anda untuk menentukan tinggi minimum dari kotak. Nilai properti min-height bisa menjadi nomor, panjang, atau persentase.
CATATAN - Properti ini tidak bekerja baik Netscape 7 atau IE 6.
Berikut adalah contoh -


<html>

   <head>

   </head>

   <body>

      <p style="width:400px; min-height:200px; border:1px solid red; padding:5px;  margin:10px;">

This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px

This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px

      </p>

      <img alt="logo" src="/css/images/logo.png" width="95" height="84" />

   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Properti max-width

Properti max-width memungkinkan Anda untuk menentukan lebar maksimum kotak. Nilai properti max-width bisa menjadi nomor, panjang, atau persentase.
CATATAN - Properti ini tidak bekerja baik Netscape 7 atau IE 6.
Berikut adalah contoh -


<html>

   <head>

   </head>

   <body>

      <p style="max-width:100px; height:200px; border:1px solid red; padding:5px;  margin:10px;">

This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px

      </p>

      <img alt="logo" src="/css/images/logo.png" width="95" height="84" />

   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Properti min-width

Properti min-width memungkinkan Anda untuk menentukan lebar minimum dari kotak. Nilai properti min-width bisa menjadi nomor, panjang, atau persentase.
CATATAN - Properti ini tidak bekerja baik Netscape 7 atau IE 6.
Berikut adalah contoh -


<html>

   <head>

   </head>

   <body>

      <p style="min-width:400px; height:100px; border:1px solid red; padding:5px;  margin:10px;">

This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px

      <img alt="logo" src="/css/images/css.gif" width="95" height="84" />

   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

COMMENTS

ltr

item

MasAgungLearning: Tutorial CSS 18 : Pengaturan Dimensi HTML dengan CSS

Tutorial CSS 18 : Pengaturan Dimensi HTML dengan CSS

Tutorial CSS kali ini membahas Pengaturan Dimensi HTML dengan CSS. Anda telah melihat perbatasan yang mengelilingi setiap kotak

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDIQBtxEybpmUHdSbRpPL2_33rteboZdFwbWI7ke3WZ_TmiQYbTaY7PSG2fr7mtO3ciFsz3evCMOvrKXB1vf605VKI6Jmub8B7XipoPSDHYRv6IyVl3phfZ6y8aGfEH0PDh8_RyQQ_dNz6/s320/CSS3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDIQBtxEybpmUHdSbRpPL2_33rteboZdFwbWI7ke3WZ_TmiQYbTaY7PSG2fr7mtO3ciFsz3evCMOvrKXB1vf605VKI6Jmub8B7XipoPSDHYRv6IyVl3phfZ6y8aGfEH0PDh8_RyQQ_dNz6/s72-c/CSS3.png

MasAgungLearning

https://masagunglearning.blogspot.com/2016/10/pengaturan-dimensi-html-dengan-css.html

https://masagunglearning.blogspot.com/

https://masagunglearning.blogspot.com/

https://masagunglearning.blogspot.com/2016/10/pengaturan-dimensi-html-dengan-css.html

true

3233199725437061161

UTF-8