css margin -left-right
margin-left ใน CSS คือคุณสมบัติที่ใช้ในการกำหนดระยะห่าง (margin) ทางด้านซ้ายขององค์ประกอบ HTML. กล่าวคือ มันจะเพิ่มพื้นที่ว่างระหว่างขอบด้านซ้ายขององค์ประกอบนั้นกับองค์ประกอบข้างเคียง หรือขอบของคอนเทนเนอร์. ค่าของ margin-left สามารถเป็นตัวเลขพร้อมหน่วยวัด (เช่น พิกเซล, em, rem) หรือเป็นค่าร้อยละ หรือเป็นค่าพิเศษเช่น auto.
ตัวอย่าง:
โค้ด
<div style="margin-left: 20px; border: 1px solid black; width: 100px;">
<p>ข้อความนี้มี margin-left: 20px</p>
</div>
ในตัวอย่างนี้ กล่อง div จะมีระยะขอบด้านซ้าย 20 พิกเซล ทำให้ข้อความภายในกล่องนั้นห่างจากขอบด้านซ้ายของกล่อง 20 พิกเซล.
คุณสมบัติเพิ่มเติม:
ค่าเป็นลบ:
สามารถใช้ค่า margin-left เป็นลบได้ ซึ่งจะทำให้องค์ประกอบนั้นขยับไปทางซ้ายมากกว่าขอบเขตปกติ.
margin: auto:
การใช้ margin: auto กับองค์ประกอบที่มี width กำหนดไว้ จะทำให้องค์ประกอบนั้นจัดกึ่งกลางในแนวนอนภายในคอนเทนเนอร์.
ความแตกต่างจาก left:
margin-left ใช้เพื่อกำหนดระยะห่างระหว่างองค์ประกอบกับขอบด้านซ้าย ในขณะที่ left ใช้ในการกำหนดตำแหน่งขององค์ประกอบแบบสัมบูรณ์ (absolute positioning).
margin-right ใน CSS คือคุณสมบัติที่ใช้กำหนดระยะขอบด้านขวาของ องค์ประกอบ HTML. มันจะสร้างพื้นที่ว่างระหว่างองค์ประกอบนั้นกับองค์ประกอบอื่นๆ ที่อยู่ทางด้านขวา. ค่าของ margin-right สามารถ เป็นตัวเลขพร้อมหน่วยวัด (เช่น พิกเซล, em, rem) หรือค่า auto.
ตัวอย่างการใช้งาน:
margin-right: 20px; // กำหนดระยะขอบด้านขวา 20 พิกเซล.
margin-right: 1.5em; // กำหนดระยะขอบด้านขวา 1.5 เท่าของขนาดตัวอักษรปัจจุบัน.
margin-right: auto; // ให้เบราว์เซอร์คำนวณระยะขอบด้านขวาที่เหมาะสม.
ความแตกต่างระหว่าง margin และ padding:
Margin:
พื้นที่ว่างด้านนอกขององค์ประกอบ (เส้นขอบ).
Padding:
พื้นที่ว่างภายในองค์ประกอบ (ระหว่างเส้นขอบและเนื้อหา).
สรุป:
margin-right เป็นคุณสมบัติ CSS ที่ใช้ควบคุมระยะห่างด้านนอกทางด้านขวาขององค์ประกอบ HTML ช่วยให้สามารถจัดวางและจัดระยะห่างระหว่างองค์ประกอบต่างๆ บนหน้าเว็บได้. #พื้นฐานทำเว็ปไซต์





























