<p class="title"><code>padding-block-end: 40px;</code></p>
<div class="container">
<div class='box'>
<p class="text horizontal-tb">This is the box with style of <code>horizontal-tb</code> as its writing mode</p>
</div>
<div class='box'>
<p class="text vertical-rl">This is the box with style of <code>vertical-rl</code> as its writing mode</p>
</div>
<div class='box'>
<p class="text vertical-lr">This is the box with style of <code>vertical-lr</code> as its 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-end: 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.