Physical Properties
A paragraph. Demonstrating Logical Properties in CSS.
Logical Properties
A paragraph. Demonstrating Logical Properties in CSS.
.box { inline-size: 200px; writing-mode: horizontal-tb; } .logical { margin-block-start: 20px; padding-inline-end: 2em; padding-block-start: 2px; border-block-start: 5px solid pink; border-inline-end: 10px dotted rebeccapurple; border-block-end: 1em double orange; border-inline-start: 1px solid black; } .physical { margin-top: 20px; padding-right: 2em; padding-top: 2px; border-top: 5px solid pink; border-right: 10px dotted rebeccapurple; border-bottom: 1em double orange; border-left: 1px solid black; } h2 { border-bottom: 5px solid black; }
<div class="wrapper"> <div class="box physical"> <h2>Physical Properties</h2> <p>A paragraph. Demonstrating Logical Properties in CSS.</p> </div> <div class="box logical"> <h2>Logical Properties</h2> <p>A paragraph. Demonstrating Logical Properties in CSS.</p> </div> </div>