CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย
Moderator: mindphp, ผู้ดูแลกระดาน
-
Parichat
- PHP VIP Members
- โพสต์: 4859
- ลงทะเบียนเมื่อ: 08/01/2018 10:03 am
โพสต์ที่ยังไม่ได้อ่าน
โดย Parichat »
Padding คือการสร้างพื้นที่ให้กับเนื้อหา
คุณสมบัติของ
CSS padding ถูกนำมาใช้ในการสร้างพื้นที่รอบ ๆ เนื้อหาขององค์ประกอบภายในของเส้นขอบใด ๆ ที่กำหนดไว้ ในการทำCSSเราสามารถจัดการกับ Padding ได้อย่างเต็มที่เพราะเราสามารถกำหนดได้ทั้ง4ด้านของเนื้อหาของคุณ
คำสั่งของ Padding มี 4 คำสั่งด้วยกัน ดังนี้
- 1.padding-top
2.padding-right
3.padding-bottom
4.padding-left
ตัวอย่าง
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: #ff99ff;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>ทดสอบการใช้งาน padding</h2>
<div>ยินดีต้อนรับ ช่อง MindPHP.</div>
</body>
</html>
ผลลัพธ์
ตัวอย่างการเขียนแบบสั้น
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px 50px 75px 100px;
background-color: #ff99ff;
}
</style>
</head>
<body>
<h2>ทดสอบการใช้งาน padding</h2>
<div>ยินดีต้อนรับ ช่อง MindPHP.</div>
</body>
</html>
ผลลัพธ์
อ้างอิง:
https://www.w3schools.com/css/css_padding.asp
Live Simply, Laugh Often, Love Deeply.....
-
-
- 0 ตอบกลับ
- 1656 แสดง
-
โพสต์ล่าสุด โดย Parichat
28/06/2018 6:14 pm
-
-
- 0 ตอบกลับ
- 5308 แสดง
-
โพสต์ล่าสุด โดย M034
30/03/2016 5:47 pm
-
-
- 0 ตอบกลับ
- 2146 แสดง
-
โพสต์ล่าสุด โดย champp
07/05/2020 4:49 pm
-
-
- 0 ตอบกลับ
- 1618 แสดง
-
โพสต์ล่าสุด โดย thatsawan
14/10/2014 5:39 pm
-
-
- 1 ตอบกลับ
- 1389 แสดง
-
โพสต์ล่าสุด โดย tsukasaz
03/03/2021 4:47 pm
-
-
- 0 ตอบกลับ
- 7682 แสดง
-
โพสต์ล่าสุด โดย M030
30/09/2015 10:06 pm
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 65