CSS - Dimensi

Anda telah melihat perbatasan yang mengelilingi setiap kotak yaitu. elemen, padding yang dapat muncul di dalam setiap kotak dan margin yang dapat mengelilinginya. Dalam tutorial ini kita akan mempelajari bagaimana kita dapat mengubah dimensi kotak.

Kami memiliki properti berikut yang memungkinkan Anda mengontrol dimensi kotak.

Itu height properti digunakan untuk mengatur ketinggian kotak.
Itu width properti digunakan untuk mengatur lebar kotak.
Itu line-height properti digunakan untuk mengatur tinggi baris teks.
Itu max-height properti digunakan untuk mengatur ketinggian maksimum yang bisa sebuah kotak.
Itu min-height properti digunakan untuk mengatur ketinggian minimum yang bisa sebuah kotak.
Itu max-width properti digunakan untuk mengatur lebar maksimum sebuah kotak.
Itu min-width properti digunakan untuk mengatur lebar minimum sebuah kotak.

Properti Tinggi dan Lebar

Properti tinggi dan lebar memungkinkan Anda mengatur tinggi dan lebar kotak. Mereka dapat mengambil nilai dari panjang, persentase, atau kata kunci otomatis.

Ini contohnya -

<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 ketinggian garis

Properti line-height memungkinkan Anda menambah spasi antar baris teks. Nilai properti line-height bisa berupa angka, panjang, atau persentase.

Ini contohnya -

<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 menentukan tinggi maksimum sebuah kotak. Nilai properti max-height bisa berupa angka, panjang, atau persentase.

NOTE - Properti ini tidak berfungsi baik di Netscape 7 atau IE 6.

Ini contohnya -

<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 menentukan tinggi minimum sebuah kotak. Nilai properti min-height bisa berupa angka, panjang, atau persentase.

NOTE - Properti ini tidak berfungsi baik di Netscape 7 atau IE 6.

Ini contohnya -

<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 lebar maksimal

Properti max-width memungkinkan Anda untuk menentukan lebar maksimum sebuah kotak. Nilai properti max-width bisa berupa angka, panjang, atau persentase.

NOTE - Properti ini tidak berfungsi baik di Netscape 7 atau IE 6.

Ini contohnya -

<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
         This paragraph is 200px high and max width is 100px
         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 = "/images/css.gif" width = "95" height = "84" />
   </body>
</html>

Ini akan menghasilkan hasil sebagai berikut -

Properti min-width

Properti min-width memungkinkan Anda untuk menentukan lebar minimum sebuah kotak. Nilai properti min-width bisa berupa angka, panjang, atau persentase.

NOTE - Properti ini tidak berfungsi baik di Netscape 7 atau IE 6.

Ini contohnya -

<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
      </p>
      <img alt = "logo" src = "/css/images/css.gif" width = "95" height = "84" />
   </body>
</html>

Ini akan menghasilkan hasil sebagai berikut -

© Copyright 2021 - 2024 | All Rights Reserved