Tag: Border

สวัสดีครับชาวคณะ ห่างหายไปนานโขเลยครับ สำหรับผมจากบทความล่าสุดที่ผ่านมา ค่อนข้างจะแรมปีอยู่แล้ว ก็เขียนก็อารัมภบทกันมาอยู่เรื่อยๆ แต่ก็ไม่คลอดสักที เนื่องด้วยว่า คำถามในหัวผมมันเยอะเกินไป ว่าทำไปแล้ว “ผู้อ่านจะได้อะไร เข้่าใจในสิ่งที่ทำไปหรือเปล่า ได้เห็นความแตกต่างกับสิ่งที่ผมพยายามจะนำเสนอหรือเปล่า เห็นประโยชน์จากสิ่งๆ นั้นหรือเปล่า” เยอะเลยใช่ไหมครับ

เข้าเรื่องกันครับ บทความนี้จะมาแนะนำ เรื่องเกี่ยวกับ การใช้ประโยชน์จาก Pseudo-Elements เพื่อที่จะทำ
ให้เกิดการแสดงผลที่เป็น Graphic ด้วย CSS อย่างที่ได้เกริ่นมาในหัวข้อ

ถ้าหากเราต้องการ box ขนาด 500px padding 5px border 5px การเขียนคลาส สามารถเขียนได้ดังนี้

.pd {
width: 480px;
padding: 5px;
border: solid 5px #000;
}

หลังจากได้พูดถึงเรื่อง padding+boder กันไปแล้ว คราวนี้มาดูเรื่องรวม margin เข้าไปด้วยกันครับ

สมมุติว่าผมจะสร้าง box หนึ่งอันกว้าง 500 พิกเซล ชื่อคลาสเดิมนะครับ (pd)