คือ ส่วนประกอบของ HTML นี่เป็นกล่อง แต่ก็จริงน่ะ อย่างข้อความก็จะมีกรอบล้อมรอบ รูปภาพก็จะมีกรอบล้อมรอบ เราสามารถปรับ margin และ padding ได้จากข้อความ รูปภาพ อย่างภาพด้านล่าง เนื้อหาจะอยู่ด้านในและมีกรอบล้อมอยู่
Content : จะเป็นข้อความ และรูปภาพ
Padding : กำหนดพื้นที่ด้านในของ content เอง จะกระทำกับ content โดยตรง
Border : เส้นที่ล้อมรอบ content
Margin : กำหนดพื้นที่ด้านนอกของ content จะไม่กระทบกับ content จะผลักตัวเองออกเรามาลองเขียนกันเลยเน้อ ว่าผลจะออกมาเป็นอย่างไร
<!doctype html>
<html>
<head>
<style>
div {
width: 300px; //ความกว้าง
border: 15px solid green; //เส้นขอบ หนา แบบเส้น สีของเส้น
padding: 50px; //การกำหนดพื้นที่ด้านในของตัวเอง
margin: 50px; //กำหนดพื้นที่ด้านนอก รอบๆ ของ content
background-color: bisque; //สีของพื้นหลัง }
</style>
</head>
<body>
<h1>The CSS Box Model</h1>
<div>
All HTML elements can be considered as boxes. In CSS,
the term "box model" is used when talking about design and layout.The CSS box model is essentially a box that wraps around every HTML element.It consists of: margins, borders,padding, and the actual content. The image below illustrates the box model:
</div></body>
</html>
Width and Height of an Element
คือ ความกว้างและความสูงของ element เพียงแค่เรากำหนดความกว้าง ความสูงจะคำนวณพื้นที่ให้เราเต็มพอดี และเราต้องเพิ่ม Padding Border Margins ให้ด้วยนะจ๊ะ
ทีนี้มาดู ถ้าเรากำหนดความกว้างที่ 500px; ความสูงจะเป็นอย่างไร พอดีกับเนื้อหาไหม
<!doctype html>
<html>
<head>
<style>
div {
width: 500px; //ความกว้าง
border: 10px solid gray; //เส้นขอบ หนา แบบเส้น สีของเส้น
padding: 10px; //การกำหนดพื้นที่ด้านในของตัวเอง
margin: 0; //กำหนดพื้นที่ด้านนอก รอบๆ ของ content
background-color: rgb(224, 206, 224); //สีของพื้นหลัง แบบRGB }
</style>
</head>
<body>
<h1>The CSS Box Model</h1>
<div>
All HTML elements can be considered as boxes. In CSS,
the term "box model" is used when talking about design and layout.The CSS box model is essentially a box that wraps around every HTML element.It consists of: margins, borders,padding, and the actual content. The image below illustrates the box model:
</div></body>
</html>
** อีกนิดหนึ่งจะสังเกตว่า เวลาที่กำหนดค่า จะบอกแค่ Border Padding Margin ไม่ได้บอกว่าด้านไหน ซ้ายหรือขวา ผลออกมาก็จะกำหนดให้กับทุกด้านโดยรู้ๆ กัน ตามกฎของเขา**
บ๊ะบายยย เจอกันเรื่องถัดไป เราได้ศึกษาจากเว็บไซต์นี้ w3schools เรื่อง CSS Box Model
