[css] ใส่ padding แล้วมันไปขยายกรอบ มีวิธีแก้หรือเปล่าครับ

[hurahura]

สมมุติเราทำกล่องข้อความ โดยกำหนดกรอบไว้ขนาด width:100px;
และเพื่อให้ตัวหนังสือไม่ติดกับเส้นกรอบ เราต้องกำหนด padding:5px;
แต่แทนที่มันจะนับจากเส้นขอบเข้ามา มันดันไปขยายกรอบ ทำให้ไปกระทบหน้าเว็บในส่วนอื่น

ทีนี้ถ้าจะใช้วิธีลดขนาดกรอบ โดยคำนวณจาก padding ที่เพิ่มขึ้น มันก็ลำบาก จะแก้ไขอะไรทีต้องแก้ 2 จุด
ปกติผมจะใช้วิธีนี้ <div style='width:100px;'><div style='padding:5px;'> Text </div></div>
คือใช้ซ้อนกัน ถ้าจะแก้ขนาดกรอบก็แก้ ที่ width อย่างเดียว ถ้าจะแก้ระยะห่างขอบก็แก้ที่ padding อย่างเดียว
วิธีนี้แก้ปัญหาได้ดี แต่ผมคิดว่ามันไม่ถูกต้อง ทำไม่เราจะต้องทำ div ซ้อนๆ กัน ทุกๆส่วนด้วย

ซึ่งเรื่องการกำหนด ตัวหนังสือไม่ให้ไปชิดกับกรอบ เป็นพื่อนฐานของเว็บทั่วไป
ดังนั้นปัญหานี้ก็น่าจะเป็นปัญหาพื้นฐานที่สุดที่ทุกคนต้องเจอ แต่ผมไม่ยักกะเคยเห็นใครบ่นเรื่องนี้เลย

ผมเลยอยากทราบว่าคนอื่นทำกันยังไง เผื่อมีอะไรที่ผมไม่รู้

ขอบคุณครับ

[mama2008]

ปกติผมใช้ ชั้นเดียวคับ ถ้าให้แก้ width ก็ใส่ไป หรือจะแก้ padding ก็ใส่ไปเลยคับ จับให้มันอยู่ class เดียวกันเวลาแก้ก็แก้ทีเดียวเลย

[smith]

ก็ใช้ เขียน css ใน div เดียวไปเลย ก็ได้ เช่น
<div style="width:100px;padding:5px;border: 1px solid #000;overflow:hidden; ">text text text text text text text texttext text text text text text text text</div>

[hurahura]

ก็ใช้ เขียน css ใน div เดียวไปเลย ก็ได้ เช่น
<div style="width:100px;padding:5px;border: 1px solid #000;overflow:hidden; ">text text text text text text text texttext text text text text text text text</div>

ง่า ก็มันทำแบบนั้นไม่ได้ไงครับ ถ้าเราเพิ่ม padding ไป แทนที่มันจะนับจากขอบเข้ามาอย่างที่ควรจะเป็น มันดันไปขยายกรอบแทน

ที่เรากำหนดไว้ 100px มันก็จะกลายเป็น 110px ซึ่งถ้าจะให้กลับมาเท่าเดิม เราต้องกำหนดเป็น width:90px;

แล้วถ้าเราอยากจะเปลี่ยน padding เป็น 4  ก็ต้องมาแก้ตรง width ด้วยยให้เป็น 92px;

ดูอันเดียวอาจไม่รู้สึกยุ่งยากอะไร แค่แก้ตัวเลข 2 จุด แต่สำหรับเว็บที่มีหน้าที่มีความซับซ้อนสูง ไอ้ตรงนี้สร้างปัญหาอย่างมาก

ไม่เข้าใจเหมือนกันว่าทำไม ไอ้ตัวมาตรฐาน ถึงได้ให้มันไปขยายกรอบแทน ดูยังไงมันก็ผิดหลัก

[siamjung]

เจอปัญหาแบบนี้เหมือนกันครับ

คงต้องทำใจและยอมใช้วิธีออกแบบ layout แต่ละส่วนให้มีค่าที่แน่นอน แบบว่าสมดุลกันไปเลย วัดความกว้างสูงแต่ละส่วนรวมค่า margin , padding แต่ละส่วนมันทีเดียวเลย

เบื่อเหมือนกันกับจุดนี้  แต่ก็เลี่ยงไม่ได้ครับ อยากให้ความกว้างแต่ละส่วนสวยพอดีเป๊ะๆก็ต้องเหนื่อยทำแบบนี้ แต่ถ้าเป็น layout ไม่จุกจิกมากก็ไม่ค่อยมีผลเท่าไหร่

[บอท!]

ยังไม่รวม ปัญหา เบราเซอร์ แต่ล่ะตัวที่คิดไม่เหมือนกันอีกนะนั่น 

[absolutex]

งงครับมันก็ต้องขยายกรอบสิครับ ไม่เช่นนั้นมันก็ไปทับรูปสิครับ - -* ก็ต้องย่อรูปแทนแหละครับ 

[thenetxx]

overflow:hidden;  หรือ overflow:auto;

[ฟาร์มเฮ้า]

ขออนุญาติขุดนะครับ พอดีหาข้อมูลใน google แล้วเจอกระทู้นี้เป็นอันดับแรก ๆ แต่ยังไม่มีคำตอบ

ผมลองใช้ code นี้

*{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

เพิ่มเข้าไป จะเป็นขนาด width ที่รวม padding แล้ว เพราะฉะนั้นเราจะแก้ไข padding ก็ไม่ต้องมาแก้ width อีกครับ

ข้อมูลเพิ่มเติม
http://hassadee.com/2013/09/20/setting-and-calculate-box-model-and-using-box-sizing-with-element-size-in-css/
http://www.siamhtml.com/%E0%B8%AA%E0%B8%AD%E0%B8%99%E0%B8%82%E0%B8%B1%E0%B9%89%E0%B8%99%E0%B8%95%E0%B8%AD%E0%B8%99-%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%97%E0%B8%B3-responsive-web-design/