CSS Height and Width เป็นการกำหนดความสูงและความกว้างของอิลิเมนต์ต่างๆ
ตัวอย่าง
<!DOCTYPE html>
<html lang="th-TH">
<head>
<title>nkaub | CSS Height และ Width</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
<meta name="author" content="Theethawat Chetjeerasioon">
<style>
div {
border: 1px solid red;
height: 700px;
width: 50%;
}
p.p1 {
background-color: red;
margin: 200px; /* ทุกด้านขนาดกว้างเท่ากัน 200 พิกเซล */
}
p.p2 {
background-color: Orange;
margin-top: 180px; /* ด้านบนขนาดกว้าง 180 พิกเซล */
}
p.p3 {
background-color: green;
margin-left: 150px; /* ด้านซ้ายขนาดกว้าง 150 พิกเซล */
}
p.p4 {
background-color: Violet;
margin-right: 100px; /* ด้านขวาขนาดกว้าง 100 พิกเซล */
}
p.p5 {
background-color: Tomato;
margin-bottom: 50px; /* ด้านล่างขนาดกว้าง 50 พิกเซล */
}
p.p6 {
background-color: MediumSeaGreen;
margin: 10px 20px 30px 40px; /* กำหนดบรรทัดเดียว 4 ด้านเลย ตามลำดับ บน ขวา ล่าง ซ้าย */
}
</style>
</head>
<body>
<div>
<p class="p1">ไม่รู้จะเขียนอะไรดี P1</p>
<p class="p2">ไม่รู้จะเขียนอะไรดี P2</p>
<p class="p3">ไม่รู้จะเขียนอะไรดี P3</p>
<p class="p4">ไม่รู้จะเขียนอะไรดี P4</p>
<p class="p5">ไม่รู้จะเขียนอะไรดี P5</p>
<p class="p6">ไม่รู้จะเขียนอะไรดี P6</p>
</div>
</body>
</html>
CSS Height and Width ค่า Value ที่สามารถกำหนดได้
- auto เว็บเบราว์เซอร์ใช้ค่านี้ เป็นค่าเริ่มต้นอยู่แล้ว
- ใช้หน่วย px em rem และอื่นๆ
- % กำหนดความกว้างและความสูงเป็นเปอร์เซนต์
- inherit สืบทอดมาจาก Parent element
Property อื่นๆที่น่าสนใจ
- max-height กำหนดความสูงสูงสุดของอิลิเมนต์
- max-width กำหนดความกว้างสูงสุดของอิลิเมนต์
- min-height กำหนดความสูงขั้นต่ำของอิลิเมนต์
- min-width กำหนดความกว้างขั้นต่ำของอิลิเมนต์