Cara memutar teks 90deg dan menghapus margin asli [duplikat]

Question

jadi saya memiliki masalah ini di mana saya memutar teks saya ke 90deg, tetapi marginnya masih sama dengan aslinya (di mana saya belum memutar teksnya)

Margin setelah saya memutar gambar tetap sama. (Saya ingin margin mengikuti orientasi baru yang saya putar teksnya)

(Saya beri garis merah agar terlihat lebih baik.)

Juga, jika memungkinkan, bisakah saya membuat garis tepi merah untuk mengisi putih di kiri? (Saya mencoba menggunakan padding tetapi tidak berfungsi seperti yang saya inginkan)

Ini kodenya

<script src="https://kit.fontawesome.com/2c7037d9e8.js" crossorigin="anonymous"></script>
<div class='color-pick'>
    <div class='color-pick-text'>
        Colors <i class="fas fa-caret-down"></i>
    </div>
    <div class='color-pick-box'>
        <div class='color-opt color-red'></div>
        <div class="color-opt color-orange"></div>
        <div class="color-opt color-yellow"></div>
        <div class="color-opt color-green"></div>
        <div class="color-opt color-blue"></div>
        <div class="color-opt color-indigo"></div>
        <div class="color-opt color-purple"></div>
        <div class="color-opt color-lime"></div>
        <div class="color-opt color-pink"></div>
        <div class="color-opt color-silver"></div>
        <div class="color-opt color-custom"></div>
    </div>
</div>

dan css:

.color-pick-box{
    background-color:#4c4c47;  
    display:flex;
    width:150px;
    flex-wrap: wrap;
}
.color-pick{
    border:1px solid blue;
    display:inline-flex;
    align-items: center;
    overflow:hidden;
}

.color-pick-text{
    text-align:center;
    border:1px solid red;
    transform:rotate(90deg);
 }

.color-opt{
    margin:5px;
    height:20px;
    width:20px;
    border-radius:50%;
}

.color-pick .fas{
    display:inline;
}

.color-red{
    background:red;
}
.color-orange{
    background:orange;
}
.color-yellow{
    background:yellow;
}
.color-green{
    background:green;
}
.color-blue{
    background:blue;
}
.color-indigo{
    background:indigo;
}
.color-purple{
    background:purple;
}
.color-lime{
    background:lime;
}
.color-pink{
    background:pink;
}
.color-silver{
    background:silver;
}
.color-custom{
    background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

Terima kasih! Maaf atas bahasa Inggris saya yang buruk

Answer 1

Saya mencoba seperti ini. Dan itu berhasil.

.color-pick-text{
    text-align:center;
    border:1px solid red;
    writing-mode: vertical-lr;
}