เส้นคั่นแนวตั้ง CSS เส้นตรงแนวตั้ง เส้นแนวตั้ง

เส้นคั่นแนวตั้ง CSS เส้นตรงแนวตั้ง เส้นแนวตั้ง บทความนี้สอนเขียน CSS เพื่อสร้างเส้นคั่นแนวตั้ง (Vertical Line) จากตัวอย่างสร้างเส้นตรงแนวตั้ง คั่นข้อมูลระหว่าง div 2 div ของ HTML สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง เส้นคั่นแนวตั้ง CSS เส้นตรงแนวตั้ง เส้นแนวตั้ง

<style>
    .vertical {
        float: left;
        border-right: 2px solid darkcyan;
        padding-right: 0.5rem;
        margin-right: 0.5rem;        
    }
</style>

<div class="vertical">ABC</div>
<div>XYZ</div>

เส้นคั่นแนวตั้ง CSS จากตัวอย่างกำหนด class .vertical สร้างเส้นความหนา 2px สี darkcyan แบบ solid จากนั้นนำไปใช้กับ div แรก ทำให้ได้ผลลัพธ์เป็นเส้นคั่นแนวตั้ง CSS ระหว่าง div 2 div ของ HTML