Log in with LINE
- 12.JPG (34.33 KiB) เปิดดู 100 ครั้ง
คำอธิบายส่วนต่าง ๆ
- 1.Content เนื้อหาของช่องที่มีข้อความและรูปภาพปรากฏขึ้น
2.Padding พื้นที่รอบ ๆ เนื้อหา padding มีความโปร่งใส
3.Border เส้นขอบที่ล้อมรอบช่องว่างและเนื้อหา
4.Margin ลบพื้นที่นอกพรมแดน ขอบมีความโปร่งใส
ตัวอย่าง
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #e6fff2;
width: 300px;
border: 25px solid #ff99ff;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<h2>ทดสอบการใช้ Box Model</h2>
<p>สวัสดีเราชื่อ MindPHP</p>
<div><h1>ยินดีที่ได้รู้จักพวกคุณ</h1>
<h2>ยินดีที่ได้รู้จักพวกคุณ</h2>
<h2>ยินดีที่ได้รู้จักพวกคุณ</h2>
<h2>ยินดีที่ได้รู้จักพวกคุณ</h2>
<h2>ยินดีที่ได้รู้จักพวกคุณ</h2></div>
</body>
</html>ผลลัพธ์
- 85.JPG (39.88 KiB) เปิดดู 100 ครั้ง
อ้างอิง: https://www.w3schools.com/css/css_boxmodel.asp
