What are logical properties?

Property and Value Mapping

Assuming left to right directionality:

<table>
<thead>
<tr>
<th>Physical Property</th>
<th>Logical Property</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>top</code></td>
<td><code>inset-block-start</code></td>
</tr>
<tr>
<td><code>right</code></td>
<td><code>inset-inline-end</code></td>
</tr>
<tr>
<td><code>bottom</code></td>
<td><code>inset-block-end</code></td>
</tr>
<tr>
<td><code>left</code></td>
<td><code>inset-inline-start</code></td>
</tr>
</tbody>
</table>

<table>
<thead>
<tr>
<th>Physical Property</th>
<th>Logical Property</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>margin-top</code></td>
<td><code>margin-block-start</code></td>
</tr>
<tr>
<td><code>margin-right</code></td>
<td><code>margin-inline-end</code></td>
</tr>
<tr>
<td><code>margin-bottom</code></td>
<td><code>margin-block-end</code></td>
</tr>
<tr>
<td><code>margin-left</code></td>
<td><code>margin-inline-start</code></td>
</tr>
</tbody>
</table>

<table>
<thead>
<tr>
<th>Physical Property</th>
<th>Logical Property</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>padding-top</code></td>
<td><code>padding-block-start</code></td>
</tr>
<tr>
<td><code>padding-right</code></td>
<td><code>padding-inline-end</code></td>
</tr>
<tr>
<td><code>padding-bottom</code></td>
<td><code>padding-block-end</code></td>
</tr>
<tr>
<td><code>padding-left</code></td>
<td><code>padding-inline-start</code></td>
</tr>
</tbody>
</table>

Tagged with


← Previous What are anonymous functions? Layout 43: Eastern Lowland Gorilla Next →