Visibility hidden กับ Display none ต่างกันยังไง

คำถามคลาสสิคเกี่ยวกับ CSS จริงๆ เวลาสัมภาษณ์งานเกี่ยวกับ Front-end มักจะโดนถามตลอด คงเพราะเค้าต้องการวัดความรู้พื้นฐานแหละ ผมคิดว่างั้น

Visibility มีสองแบบก็คือ visible กับ hidden ง่ายก็คือซ่อนไว้กับแสดงนั่นแหละ ยกตัวอย่างเช่น ปุ่มนึงในหน้าเว็บ ถ้าซ่อนก็ใส่ visibiility:hidden ถ้าแสดงก็ใส่ visibility:visible แค่นั้นเอง

ความต่างของ Visibility hidden กับ display none

ความต่างคือ display:none จะไม่มีการจองพื้นที่ในหน้าเว็บไว้ให้สิ่งที่เซ็ตค่าเป็น display:none แต่ visibility:hidden จะจองพื้นที่บนหน้าเว็บไว้สำหรับ element นั้น แค่ซ่อนมันไว้เฉยๆ แค่นั้นเองครับ ไม่มีอะไรซับซ้อน

ผมแค่อยากเขียนเป็นโน้ตแปะไว้เฉยๆ

Leave a comment

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