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 ช่วยให้สามารถจัดวางและจัดระยะห่างระหว่างองค์ประกอบต่างๆ บนหน้าเว็บได้. #พื้นฐานทำเว็ปไซต์