Lv.23 CSS Height and Width

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 กำหนดความกว้างขั้นต่ำของอิลิเมนต์

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น

Top