Lv.24 CSS Box Model

CSS Box Model ในทุกๆอิลิเมนต์บนเว็บเพจ จะมีโครงสร้างหนึ่งที่เหมือนกันคือ Box model โดยมีลักษณะคล้ายกล่องสี่เหลี่ยม ที่มีคุณสมบัติพื้นฐานแบบเดียวกันคือ margin padding width height โดยค่าเหล่านั้นจะอ้างองจากกับกรอบ(border) และข้อความที่อยู่ในอิลิเมนต์นั้นๆ

CSS Box Model
CSS Box Model
  • Content เนื้อหาของกล่องที่แสดงข้อความและรูปภาพ
  • Padding เพิ่มพื้นที่รอบๆ(ช่องว่าง)ของเนื้อหา
  • Border เส้นขอบที่ล้อมรอบช่องว่างภายในและเนื้อหา
  • Margin พื้นที่ระว่างอิลิเมนต์

Box model ช่วยให้เราเพิ่มเส้นขอบรอบอิลิเมนต์และกำหนดช่องว่างระหว่างอิลิเมนต์ได้

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Box Model</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>
			.div1 {
				background-color: grey;
				width: 500px;
				margin: 20px;
				border: 15px solid blue;
				padding: 40px;
			}
			.div2 {
				width: 500px;
				height: 100px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
	
		<div class="div1">
			<p>เพิ่มช่องว่างภายใน 40 พิกเซล เส้นขอบ 15พิกเซล และระยะห่างระหว่างอิลิเมนต์ 20 พิกเซล. <br>
			Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
			Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
			when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
			It has survived not only five centuries, but also the leap into electronic typesetting, 
			remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
			and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
		</div>
		<div class="div2"></div>
		
	</body>
</html>
Top