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

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

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

Parichat
PHP VIP Members
PHP VIP Members
Posts: 4859
Joined: 08/01/2018 10:03 am

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

Post by Parichat »

Padding คือการสร้างพื้นที่ให้กับเนื้อหา
คุณสมบัติของ CSS padding ถูกนำมาใช้ในการสร้างพื้นที่รอบ ๆ เนื้อหาขององค์ประกอบภายในของเส้นขอบใด ๆ ที่กำหนดไว้ ในการทำCSSเราสามารถจัดการกับ Padding ได้อย่างเต็มที่เพราะเราสามารถกำหนดได้ทั้ง4ด้านของเนื้อหาของคุณ

คำสั่งของ Padding มี 4 คำสั่งด้วยกัน ดังนี้
  • 1.padding-top
    2.padding-right
    3.padding-bottom
    4.padding-left
ตัวอย่าง

Code: Select all

<!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
ตัวอย่างการเขียนแบบสั้น

Code: Select all

<!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
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 2 guests