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

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

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

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

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

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

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
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

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

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