CSS - มิติข้อมูล

คุณได้เห็นเส้นขอบที่ล้อมรอบทุกกล่องเช่น องค์ประกอบช่องว่างภายในที่สามารถปรากฏภายในแต่ละกล่องและระยะขอบที่สามารถไปรอบ ๆ ได้ ในบทช่วยสอนนี้เราจะเรียนรู้ว่าเราจะเปลี่ยนขนาดของกล่องได้อย่างไร

เรามีคุณสมบัติต่อไปนี้ที่ช่วยให้คุณสามารถควบคุมขนาดของกล่องได้

height คุณสมบัติถูกใช้เพื่อกำหนดความสูงของกล่อง
width คุณสมบัติถูกใช้เพื่อกำหนดความกว้างของกล่อง
line-height คุณสมบัติถูกใช้เพื่อกำหนดความสูงของบรรทัดข้อความ
max-height คุณสมบัติถูกใช้เพื่อตั้งค่าความสูงสูงสุดที่กล่องสามารถเป็นได้
min-height คุณสมบัติถูกใช้เพื่อกำหนดความสูงขั้นต่ำที่กล่องสามารถเป็นได้
max-width คุณสมบัติถูกใช้เพื่อกำหนดความกว้างสูงสุดที่กล่องสามารถเป็นได้
min-width คุณสมบัติถูกใช้เพื่อกำหนดความกว้างขั้นต่ำที่กล่องสามารถเป็นได้

คุณสมบัติความสูงและความกว้าง

คุณสมบัติความสูงและความกว้างช่วยให้คุณกำหนดความสูงและความกว้างสำหรับกล่องได้ โดยสามารถรับค่าเป็นความยาวเปอร์เซ็นต์หรือคำหลักอัตโนมัติ

นี่คือตัวอย่าง -

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

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสมบัติบรรทัดความสูง

คุณสมบัติline-heightช่วยให้คุณสามารถเพิ่มช่องว่างระหว่างบรรทัดของข้อความ ค่าของคุณสมบัติ line-height อาจเป็นตัวเลขความยาวหรือเปอร์เซ็นต์

นี่คือตัวอย่าง -

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

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสมบัติความสูงสูงสุด

สูงสุดสูงคุณสมบัติช่วยให้คุณระบุความสูงสูงสุดของกล่อง ค่าของคุณสมบัติความสูงสูงสุดอาจเป็นตัวเลขความยาวหรือเปอร์เซ็นต์

NOTE - คุณสมบัตินี้ใช้ไม่ได้ใน Netscape 7 หรือ IE 6

นี่คือตัวอย่าง -

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

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสมบัติขั้นต่ำ

คุณสมบัติmin-heightช่วยให้คุณระบุความสูงขั้นต่ำของกล่อง ค่าของคุณสมบัติ min-height อาจเป็นตัวเลขความยาวหรือเปอร์เซ็นต์

NOTE - คุณสมบัตินี้ใช้ไม่ได้ใน Netscape 7 หรือ IE 6

นี่คือตัวอย่าง -

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

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสมบัติความกว้างสูงสุด

ความกว้างสูงสุดคุณสมบัติช่วยให้คุณระบุความกว้างสูงสุดของกล่อง ค่าของคุณสมบัติความกว้างสูงสุดอาจเป็นตัวเลขความยาวหรือเปอร์เซ็นต์

NOTE - คุณสมบัตินี้ใช้ไม่ได้ใน Netscape 7 หรือ IE 6

นี่คือตัวอย่าง -

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

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสมบัติความกว้างต่ำสุด

คุณสมบัติmin-widthช่วยให้คุณสามารถระบุความกว้างขั้นต่ำของกล่อง ค่าของคุณสมบัติความกว้างต่ำสุดอาจเป็นตัวเลขความยาวหรือเปอร์เซ็นต์

NOTE - คุณสมบัตินี้ใช้ไม่ได้ใน Netscape 7 หรือ IE 6

นี่คือตัวอย่าง -

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

มันจะให้ผลลัพธ์ดังต่อไปนี้ -