<p class="title"><code>padding-block-start: 40px;</code></p>
<div class="container">
<div class='box'>
<p class="text horizontal-tb">Top is the starting edge is when <code>horizontal-tb</code> is the writing mode</p>
</div>
<div class='box'>
<p class="text vertical-rl">Right is the starting edge when <code>vertical-rl</code> is the writing mode</p>
</div>
<div class='box'>
<p class="text vertical-lr">Left is the starting edge when <code>vertical-lr</code> is the writing mode</p>
</div>
</div>
body{
width:100%;
display:flex;
align-items:center;
flex-direction:column;
}
.title {
text-align:center;
font-size:20px;
}
.container {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 1em;
margin: 2em;
}
.box {
width: 200px;
height: 200px;
}
.text {
border: 3px dashed #ff7a18;
padding-block-start: 40px;
}
.horizontal-tb {
writing-mode: horizontal-tb;
}
.vertical-rl {
writing-mode: vertical-rl;
}
.vertical-lr {
writing-mode: vertical-lr;
margin-left: -20px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.