การใช้งาน Box Model ใน CSS

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 1608
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

การใช้งาน Box Model ใน CSS

โพสต์โดย Parichat » 09/01/2018 3:01 pm

CSS box model เป็นกล่องที่ล้อมรอบทุกองค์ประกอบของ HTML ประกอบด้วยขอบ เส้นขอบ ช่องว่างและเนื้อหาที่แท้จริง ภาพด้านล่างแสดงให้เห็นถึงรูปแบบกล่อง
12.JPG
12.JPG (34.33 KiB) เปิดดู 190 ครั้ง


คำอธิบายส่วนต่าง ๆ
    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
85.JPG (39.88 KiB) เปิดดู 190 ครั้ง


อ้างอิง: https://www.w3schools.com/css/css_boxmodel.asp
Live Simply, Laugh Often, Love Deeply.....

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 1 และ บุคคลทั่วไป 0 ท่าน