การใช้งาน Padding ใน CSS

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

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

Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 4859
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

การใช้งาน Padding ใน CSS

โพสต์ที่ยังไม่ได้อ่าน โดย 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>
ผลลัพธ์
ffj.JPG
ตัวอย่างการเขียนแบบสั้น

โค้ด: เลือกทั้งหมด

<!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>
ผลลัพธ์
21.JPG
อ้างอิง: https://www.w3schools.com/css/css_padding.asp
Live Simply, Laugh Often, Love Deeply.....
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 42