การใช้ css padding และ border ร่วมกัน

ภาพสี่เหลี่ยมสีเหลือง ขอบสีดำ

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

อย่าลืมนะครับว่า padding ซ้าย-ขวา 5+5 = 10 และ border ซ้าย-ขวา 5+5 = 10 ค่า width จึงเขียนแค่ 480 เพราะผมรวมออกมามันจะเป็นค่า 500px นั่นเอง

Back to Top

5 Responses to การใช้ css padding และ border ร่วมกัน

  1. X

    IE นับborderด้วยเหรอครับ งง ถ้าIEก็ตั้งwidthแค่490นี่

    Reply

  2. หุหุ

    จาเขียนให้ดูใน IE 6 อย่างเดียวหรอ….คับ

    Reply

  3. okay

    เท่าที่อ่านมาการแสดงผลใน ie6 ie7 firefox จะไม่เหมือนกันนิคับ บางตัวรวม padding บางตัวไม่รวม padding ต้องแก้ด้วยการใช้ คำสั่ง

    width:500px;

    w/idth:490px;

    ปล. เห็นผ่านๆในหนังสือมาไม่เคยลองใช้จริงคับ

    Reply

  4. KRISS

    IE 5.x และ IE 6 มันไม่ทำตาม standard หลายๆอย่างครับ

    เช่นเรื่อง box model นี่ใน quirks mode มันจะนับความกว้าง (width) จาก content+padding+border ครับ

    โดยส่วนตัวคิดว่ามัน set ง่ายกว่านะครับ อยากได้ 500px ใส่ 500px ไม่ต้องลบเลข

    แต่โดยส่วนตัวอีกก็คิดว่าในเมื่อมี standard ก็น่าจะทำตาม standard นะ ฮึ่ม

    สรุปคือ อะไร work ก็ใช้ครับ

    Reply

  5. KRISS

    แว่วๆว่าใน CSS ถัดๆไป "อาจจะ" มีการให้เลือกได้ครับว่าจะตั้ง width แบบไหน

    1.แบบ standard เดิมคือ width = content width

    2.แบบ width = visible box width (content+padding+border)

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top