CSS - ระยะขอบ

ขอบคุณสมบัติกำหนดพื้นที่รอบ ๆ องค์ประกอบ HTML เป็นไปได้ที่จะใช้ค่าเชิงลบเพื่อซ้อนทับเนื้อหา

ค่าของคุณสมบัติระยะขอบไม่ได้รับการสืบทอดโดยองค์ประกอบลูก โปรดจำไว้ว่าระยะขอบแนวตั้งที่อยู่ติดกัน (ระยะขอบบนและขอบล่าง) จะยุบเข้าหากันเพื่อให้ระยะห่างระหว่างบล็อกไม่ใช่ผลรวมของระยะขอบ แต่จะมีเพียงระยะขอบสองช่องที่มากกว่าหรือมีขนาดเท่ากันกับระยะขอบเดียวหากทั้งสองเป็น เท่ากัน.

เรามีคุณสมบัติดังต่อไปนี้เพื่อกำหนดระยะขอบขององค์ประกอบ

margin ระบุคุณสมบัติชวเลขสำหรับการตั้งค่าคุณสมบัติระยะขอบในการประกาศครั้งเดียว
margin-bottom ระบุขอบล่างขององค์ประกอบ
margin-top ระบุระยะขอบบนขององค์ประกอบ
margin-left ระบุระยะขอบด้านซ้ายขององค์ประกอบ
margin-right ระบุขอบด้านขวาขององค์ประกอบ

ตอนนี้เราจะดูวิธีใช้คุณสมบัติเหล่านี้พร้อมตัวอย่าง

คุณสมบัติมาร์จิ้น

คุณสมบัติระยะขอบช่วยให้คุณตั้งค่าคุณสมบัติทั้งหมดสำหรับระยะขอบทั้งสี่ในการประกาศครั้งเดียว นี่คือไวยากรณ์สำหรับกำหนดระยะขอบรอบย่อหน้า -

นี่คือตัวอย่าง -

<html>
   <head>
   </head>
   
   <body>
      <p style = "margin: 15px; border:1px solid black;">
         all four margins will be 15px
      </p>
      
      <p style = "margin:10px 2%; border:1px solid black;">
         top and bottom margin will be 10px, left and right margin will be 2% 
         of the total width of the document.
      </p>
      
      <p style = "margin: 10px 2% -10px; border:1px solid black;">
         top margin will be 10px, left and right margin will be 2% of the 
         total width of the document, bottom margin will be -10px
      </p>
      
      <p style = "margin: 10px 2% -10px auto; border:1px solid black;">
         top margin will be 10px, right margin will be 2% of the total 
         width of the document, bottom margin will be -10px, left margin 
         will be set by the browser
      </p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสมบัติขอบล่าง

คุณสมบัติระยะขอบล่างช่วยให้คุณกำหนดระยะขอบล่างขององค์ประกอบได้ สามารถมีค่าเป็นความยาว% หรืออัตโนมัติ

นี่คือตัวอย่าง -

<html>
   <head>
   </head>

   <body>
      <p style = "margin-bottom: 15px; border:1px solid black;">
         This is a paragraph with a specified bottom margin
      </p>
      
      <p style = "margin-bottom: 5%; border:1px solid black;">
         This is another paragraph with a specified bottom margin in percent
      </p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ทรัพย์สินที่มีหลักประกันสูงสุด

คุณสมบัติระยะขอบบนช่วยให้คุณกำหนดระยะขอบบนขององค์ประกอบได้ สามารถมีค่าเป็นความยาว% หรืออัตโนมัติ

นี่คือตัวอย่าง -

<html>
   <head>
   </head>

   <body>
      <p style = "margin-top: 15px; border:1px solid black;">
         This is a paragraph with a specified top margin
      </p>
      
      <p style = "margin-top: 5%; border:1px solid black;">
         This is another paragraph with a specified top margin in percent
      </p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสมบัติขอบซ้าย

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

นี่คือตัวอย่าง -

<html>
   <head>
   </head>

   <body>
      <p style = "margin-left: 15px; border:1px solid black;">
         This is a paragraph with a specified left margin
      </p>
      
      <p style = "margin-left: 5%; border:1px solid black;">
         This is another paragraph with a specified top margin in percent
      </p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ทรัพย์สินที่มีขอบขวา

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

นี่คือตัวอย่าง -

<html>
   <head>
   </head>
   
   <body>
      <p style = "margin-right: 15px; border:1px solid black;">
         This is a paragraph with a specified right margin
      </p>
      <p style = "margin-right: 5%; border:1px solid black;">
         This is another paragraph with a specified right margin in percent
      </p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -