มาร์จิน แพดดิง และเส้นขอบเชิงตรรกะ
แทนที่ top/right/bottom/left ด้วยคุณสมบัติเชิงตรรกะเทียบเท่า start/end/block/inline
มาร์จิน แพดดิง และเส้นขอบเชิงตรรกะ เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
สิ่งที่เทียบเท่าเชิงตรรกะสำหรับระยะห่าง
คุณสมบัติระยะห่างเชิงกายภาพมีคุณสมบัติคู่กันเชิงตรรกะที่ใช้ทิศทางบล็อกและอินไลน์:
margin-top→margin-block-startmargin-bottom→margin-block-endmargin-left→margin-inline-startmargin-right→margin-inline-end
คุณสมบัติชวเลขเชิงตรรกะ
คุณสมบัติชวเลขรูปแบบใหม่ครอบคลุมทั้งสองด้านของบล็อกหรือทั้งสองด้านของอินไลน์:
<div class="card">Card with logical spacing</div>
การจัดกึ่งกลางด้วย margin-inline: auto
รูปแบบการจัดกึ่งกลางแบบดั้งเดิมมีรูปแบบที่เทียบเท่าเชิงตรรกะแล้ว:
<div class="container">Centered container</div>
คุณสมบัติเส้นขอบเชิงตรรกะ
กำหนดเส้นขอบที่ด้านต่าง ๆ ตามตรรกะ:
<div class="card">Card with top border</div>
<blockquote class="quote">Quoted text with a gold side border</blockquote>
คุณสมบัติตำแหน่งเชิงตรรกะ
คุณสมบัติการกำหนดตำแหน่งก็มีคุณสมบัติคู่กันเชิงตรรกะเช่นกัน:
top→inset-block-startbottom→inset-block-endleft→inset-inline-startright→inset-inline-end
ชวเลข inset
คุณสมบัติ inset เป็นชวเลขเชิงตรรกะสำหรับทั้งสี่ด้านอยู่แล้ว ส่วน inset-block และ inset-inline ช่วยควบคุมสองแกน
<div class="wrap"><div class="overlay"></div></div>
คุณสมบัติกำหนดขนาดเชิงตรรกะ
ความกว้างและความสูงมีสิ่งที่เทียบเท่าเชิงตรรกะ:
<div class="box">Sized box</div>
การเปรียบเทียบ: เชิงกายภาพกับเชิงตรรกะ
แถบด้านข้างที่มีเส้นขอบด้านเริ่มต้น:
<div class="sidebar-physical">Physical (border-left)</div>
<div class="sidebar-logical">Logical (border-inline-start)</div>
ค่าเชิงตรรกะของ float และ clear
ขณะนี้คุณสมบัติ float และ clear รองรับค่าเชิงตรรกะแล้ว:
<div class="figure"></div><p>Text wraps around the floated figure.</p><div class="clear">Cleared element</div>
text-align เชิงตรรกะ
text-align: start และ text-align: end เป็นทางเลือกเชิงตรรกะแทน left และ right โดยจะปรับตามทิศทางข้อความโดยอัตโนมัติ
<div class="nav-link">Aligned to the start (left in LTR)</div>
กลยุทธ์การย้ายระบบ
สำหรับโค้ดใหม่ ให้เลือกใช้คุณสมบัติเชิงตรรกะ สำหรับโค้ดเดิม ให้ปรับโครงสร้างทีละส่วนประกอบ ลำดับความสำคัญในการย้ายระบบคือ ระยะห่าง (margin/padding) เส้นขอบ การกำหนดขนาด และการกำหนดตำแหน่ง
ตรวจสอบความเข้าใจอย่างรวดเร็ว
คุณสมบัติเชิงตรรกะใดเทียบเท่ากับ margin-left ในเค้าโครง LTR และควรเปลี่ยนเป็น margin-right ใน RTL?
สรุปทบทวน
คุณสมบัติ margin, padding และ border เชิงตรรกะใช้ทิศทาง block และ inline แทน top/right/bottom/left เชิงกายภาพ ชวเลขอย่าง margin-block, padding-inline และ inset-block ครอบคลุมทั้งสองด้านพร้อมกัน ควรเลือกใช้คุณสมบัติเชิงตรรกะกับระยะห่างทั้งหมดในโค้ดใหม่ เพื่อให้รองรับ RTL และโหมดการเขียนแนวตั้งโดยอัตโนมัติ
คำถามที่พบบ่อย
บทเรียน “มาร์จิน แพดดิง และเส้นขอบเชิงตรรกะ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “มาร์จิน แพดดิง และเส้นขอบเชิงตรรกะ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “มาร์จิน แพดดิง และเส้นขอบเชิงตรรกะ”
แทนที่ top/right/bottom/left ด้วยคุณสมบัติเชิงตรรกะเทียบเท่า start/end/block/inline คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “มาร์จิน แพดดิง และเส้นขอบเชิงตรรกะ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เหตุใดจึงต้องใช้คุณสมบัติเชิงตรรกะ: การทำให้เป็นสากล
- ทิศทางบล็อกและอินไลน์
- มาร์จิน แพดดิง และเส้นขอบเชิงตรรกะ
- คุณสมบัติเชิงตรรกะในเลย์เอาต์ RTL