ในการทำเว็บนั้น เราอาจจะเจอกรณีที่ layout ต้องเปลี่ยนไปตามความกว้าง เช่น เวลาทำเว็บที่เป็น responsive หรือเวลาที่สั่งพิมพ์ทางเครื่องพิมพ์ ตามปรกติแล้ว เราจะเคลียร์ค่า float หรือ width
โดยการเคลียร์ค่า float นั้น เราก็เพียงสั่ง float:none แต่ในการเคลียร์ค่า width บางคนกลับใช้ width:100% แทนที่จะเป็น width:auto
โดยพื้นฐานแล้ว บรรดา element ที่มีคุณสมบัติเป็น block อย่างเช่น div หรือ p พวกนี้จะมีความกว้างเป็น auto โดยมาตรฐาน แล้ว width:auto กับ width:100% มันต่างกันยังไง
width:auto vs width:100%
วิธีที่ทำให้เราเข้าใจ และเห็นภาพมากที่สุด ก็คือ เขียนให้มันแสดงผลมาให้เราดูครับ งั้นเรามาลองดูกันเลยครับ
กล่องนี้มีความกว้าง 400px
กล่องนี้ตั้งความกว้างเป็น width:auto
มี padding ซ้ายขวา 50px
มี margin ซ้ายขวา 50px
และมีกรอบหนา 10px
กล่องนี้ตั้งความกว้างเป็น width:100%
มี padding ซ้ายขวา 50px
มี margin ซ้ายขวา 50px
และมีกรอบหนา 10px
width:auto นั้นจะคำนวนมาให้ความกว้างพอดีกับกล่องที่คลุมไว้ โดยความกว้างของสีแดงที่เห็น จะมีค่าเท่ากับ 280px (มีค่า padding ด้านละ 50px รวมอยู่ใน 280px ด้วย) เมื่อรวมกับ border และ margin แล้วจะมีค่าเท่ากับ 400px พอดี แต่ถ้าเราตั้งค่าเป็น width:100% แล้ว ความกว้างของกล่องสีน้ำเงิน จะมีค่าเท่ากับ 500px ซึ่งมาจาก 400px บวกกับ padding ซ้ายขวาอย่างละ 50px ทำให้ตัวกล่องสีน้ำเงิน เกินออกมาจากกล่องสีเทาที่คลุมอยู่
จากตัวอย่างน่าจะทำให้เข้าใจความแตกต่างระหว่าง width:auto กับ width:100% บ้างนะครับ ยังไงก็ลองเอาไปปรับใช้งานกันนะครับ
Leave a Reply