Categories
CSS HTML

[CSS] ข้อแตกต่างระหว่าง width:auto กับ width:100%

ในการทำเว็บนั้น เราอาจจะเจอกรณีที่ layout ต้องเปลี่ยนไปตามความกว้าง เช่น เวลาทำเว็บที่เป็น responsive หรือเวลาที่สั่งพิมพ์ทางเครื่องพิมพ์ ตามปรกติแล้ว เราจะเคลียร์ค่า float หรือ width

ในการทำเว็บนั้น เราอาจจะเจอกรณีที่ 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% บ้างนะครับ ยังไงก็ลองเอาไปปรับใช้งานกันนะครับ

2 replies on “[CSS] ข้อแตกต่างระหว่าง width:auto กับ width:100%”

ก็ไม่ได้มีอะไรมาก คือบางทีเราจะมีสั่ง float:left; float:right; ไว้ ก็เลยจะเคลียร์ค่า เพื่อเปลี่ยน layout ให้ตรงกับที่เราต้องการ หรือเราตั้งค่า width มีค่าอยู่เท่าไหร่ เราก็เคลียร์พวกนั้นทิ้ง อะไรแบบนั้นละ

Leave a Reply

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