CSS Box Model

CSS มององค์ประกอบของ HTML (element) เป็นกล่องที่ซ้อนกันหลายกล่อง ซึ่งกล่อง 1 กล่อง เท่ากับ 1 องค์ประกอบ (element) 

ภายในกล่องประกอบด้วย 1.content 2.padding 3.border และ 4.margin เรียงลำดับจากภายในสู่ภายนอกของ element ดังภาพที่ 1

  1. Content ส่วนของเนื้อหาภายใน element
  2. Padding ระยะห่างระหว่างเนื้อหากับเส้นขอบ
  3. Border เส้นขอบ
  4. Margin ระยะห่างระหว่างเส้นขอบกับ element อื่นๆ

ภาพที่ 1 Box model

ตัวอย่างการนำความรู้เรื่อง Box model ไปใช้งาน

<html>
<head>
<style>
div {
  padding:20px;
  border:2px solid red;
  margin:8px;
  text-align:center;
}
h3{
    margin:20px;
}
</style>
</head>
<body>

<h3>การนำความรู้เรื่อง Box model ไปใช้งาน</h3>

<div>Element 1</div>
<div>Element 2</div>

</body>
</html>

ไฟล์ที่ 1 box_model.html

ผลลัพธ์ไฟล์ที่ 1

การนำความรู้เรื่อง Box model ไปใช้งาน

Element 1
Element 2

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors:

Send