วิธีการติดตั้ง Padding ใน CSS ด้วยตัวอย่าง



บทความนี้จะให้ความรู้โดยละเอียดและครอบคลุมเกี่ยวกับวิธีใช้ Padding ใน CSS ด้วยตัวอย่าง

Padding เป็นสิ่งที่สำคัญที่สุดอย่างหนึ่งของ และ . ในบทความนี้เราจะพูดถึงความสำคัญและการใช้งาน Padding ใน CSS ตามลำดับต่อไปนี้:

Padding ใน CSS คืออะไร?

คุณสมบัติช่องว่างภายในช่วยให้คุณระบุตำแหน่งที่จะระบุและพื้นที่ว่างที่ควรปรากฏระหว่างข้อความเนื้อหาขององค์ประกอบและเส้นขอบ ค่าของแอตทริบิวต์นี้ควรเป็นความยาวหรือเปอร์เซ็นต์หรือคำ





Padding-in-CSS



หากค่าได้รับการสืบทอดค่าจะเป็นช่องว่างภายในเดียวกันกับค่าระดับบนสุด ที่นี่หากใช้เปอร์เซ็นต์เปอร์เซ็นต์จะเป็นของกล่องที่มี

คุณสมบัติการเติม

คุณสมบัติต่อไปนี้ของ Padding ใน CSS สามารถใช้เพื่อควบคุมรายการ ถึงกระนั้นคุณยังสามารถตั้งค่าต่างๆสำหรับช่องว่างภายในช่องด้านใดด้านหนึ่งของกล่องโดยส่วนใหญ่ใช้คุณสมบัติต่อไปนี้:

  • ช่องว่างด้านล่าง: ระบุช่องว่างด้านล่างขององค์ประกอบ



  • Padding-top: ระบุช่องว่างด้านบนขององค์ประกอบ

  • ช่องว่างด้านซ้าย: ระบุช่องว่างด้านซ้ายขององค์ประกอบ

  • ช่องว่างด้านขวา: มันระบุช่องว่างที่เหมาะสมขององค์ประกอบ

    บทช่วยสอนสำหรับนักพัฒนา pl sql สำหรับผู้เริ่มต้น
  • การขยายความ: นี้ทำหน้าที่เป็นชวเลขสำหรับคุณสมบัติเพิ่มเติม

คุณสมบัติ Padding-bottom:

ค่านี้ถูกตั้งค่าเป็นช่องว่างด้านล่างขององค์ประกอบ สามารถใช้ค่าความยาวเป็นเปอร์เซ็นต์


นี่คือการเว้นวรรคด้านล่างที่ระบุไว้



นี่คือย่อหน้าอื่นที่ระบุช่องว่างด้านล่างเป็นเปอร์เซ็นต์

เอาท์พุต:

คุณสมบัติ Padding-top

คุณสมบัติ padding-top นี้จะตั้งค่าช่องว่างด้านบนขององค์ประกอบ ซึ่งสามารถใช้ค่าความยาวเป็นเปอร์เซ็นต์


นี่คือย่อหน้าที่ระบุช่องว่างบนสุด



นี่คือย่อหน้าอื่นที่ระบุช่องว่างด้านบนเป็นเปอร์เซ็นต์

เอาท์พุต:

คุณสมบัติ Padding-left

คุณสมบัติช่องว่างด้านซ้ายนี้จะตั้งค่าช่องว่างด้านซ้ายขององค์ประกอบ สามารถใช้ค่าความยาวเป็นเปอร์เซ็นต์

วิธีการใช้งานฮีป


นี่คือย่อหน้าที่ระบุช่องว่างภายในด้านซ้าย



นี่คือย่อหน้าอื่นที่ระบุช่องว่างด้านซ้ายเป็นเปอร์เซ็นต์

เอาท์พุต:

คุณสมบัติ Padding-right

คุณสมบัติ padding-right นี้จะตั้งค่าช่องว่างที่เหมาะสมขององค์ประกอบ สามารถใช้ค่าความยาวเป็นเปอร์เซ็นต์


นี่คือย่อหน้าที่ระบุช่องว่างภายในด้านขวา



นี่คือย่อหน้าอื่นที่ระบุช่องว่างด้านขวาเป็นเปอร์เซ็นต์

เอาท์พุต:

คุณสมบัติ Padding

คุณสมบัติช่องว่างภายในนี้ตั้งค่าช่องว่างด้านขวาซ้ายบนและล่าง ซึ่งสามารถใช้ค่าความยาวเป็นเปอร์เซ็นต์


ช่องว่างทั้งสี่นี้จะมีขนาด 20px



ช่องว่างด้านบนและด้านล่างจะเป็น 20px ด้านขวาและด้านซ้ายจะเท่ากับ 10% ของความกว้างทั้งหมดของเอกสาร



ช่องว่างด้านบนและด้านล่างจะเป็น 20px ช่องว่างด้านขวาจะเป็น 3% ของความกว้างทั้งหมดของเอกสารช่องว่างด้านล่างและช่องว่างด้านบนจะเป็น 20px

เอาท์พุต:

ด้วยเหตุนี้เราจึงมาถึงจุดสิ้นสุดของบทความที่น่าทึ่งนี้เกี่ยวกับ Padding ใน CSS ฉันหวังว่าคุณจะเข้าใจวิธีต่างๆที่เราสามารถเพิ่มช่องว่างภายในได้

หากคุณสนใจเรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนาเว็บโปรดดูที่ โดย Edureka การฝึกอบรมการรับรองการพัฒนาเว็บจะช่วยให้คุณเรียนรู้วิธีสร้างเว็บไซต์ที่น่าประทับใจโดยใช้ HTML5, CSS3, Twitter Bootstrap 3, jQuery และ Google API และปรับใช้กับ Amazon Simple Storage Service (S3)

หากคุณยังสนใจหากคุณมีคำถามใด ๆ คุณสามารถโพสต์ไว้ในส่วนความคิดเห็นของบล็อก 'Padding in CSS' และเราจะติดต่อกลับโดยเร็วที่สุด