Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
left/right/top/bottom, use inline (text direction) and block (perpendicular). Automatically adapts to RTL (Arabic, Hebrew) and vertical writing modes!margin-left: 20px;Always left, regardless of text direction
margin-inline-start: 20px;Start of text direction (left in LTR, right in RTL)
Direction of text flow
Direction perpendicular to text
margin-left→margin-inline-startmargin-right→margin-inline-endmargin-top→margin-block-startmargin-bottom→margin-block-endpadding-left→padding-inline-startborder-right→border-inline-end<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<h1>🌍 Logical Properties Demo</h1>
<div class="demo-section">
<div class="label">Click to change text direction:</div>
<div class="direction-toggle">
<button class="active" onclick="setDirection('ltr')">LTR (English)</button>
<button onclick="setDirection('rtl')">RTL (Arabic/Hebrew)</button>
</div>
<div class="box" id="demoBox">
<div class="content">
This box uses logical properties!<br>
• margin-inline-start (adapts to direction)<br>
• padding-inline (left & right in LTR)<br>
• border-inline-start (green border)<br><br>
Watch how everything flips when you change direction! 🔄
</div>
</div>
</div>
</div>
</body>
</html>Loading preview...
margin-inline-start/end, margin-block-start/endpadding-inline-start/end, padding-block-start/endborder-inline-start/end, border-block-start/endmargin-inline, margin-block, padding-inline, padding-blockinline-size (width), block-size (height)min-inline-size, max-inline-size, min-block-size, max-block-sizeinset-inline-start/end, inset-block-start/end