display ใน css ที่ใช้กันบ่อยๆ

หน้าแรก CSS display ใน css ที่ใช้กันบ่อยๆ

display ที่ใช้กันบ่อยๆ มี

Code

display:block --- แสดงผลเป็นลักษณะกล่อง ขึ้นบรรทัดใหม่
display:inline --- แสดงผลเป็นบรรทัดเดียวต่อกัน ไม่ขึ้นบรรทัดใหม่
display:none --- ซ่อน ไม่แสดงผล

Tag H,p,ul,li จะเป็น block element คือมี display:block แฝงอยู่ พอเขียนเรียงกันแล้ว จะขึ้นบรรทัดใหม่เองทุกครั้ง
Tag span, strong, em จะเป็น inline element คือมี display:inline แฝงอยู่ พอเขียนเรียงกันแล้ว จะต่อๆกันไปได้เรื่อยๆ ไม่ขึ้นบรรทัดใหม่

หากต้องการเขียน p หรือ li ให้เรียงต่อกัน ก็ใส่ display:inline ให้มัน
หากต้องการให้ span หรือ strong มีลักษณะเป็นกล่อง ก็ใส่ display:block ให้มัน

ใช้สลับคุณลักษณะประจำตัวของ tag ที่ใช้บ่อยๆคือ tag a เป็นลิ้งค์ มันเป็น inline แต่เราใส่ display:block ให้มัน พอใส่ bg เส้นขอบ มันก็จะมีลักษณะเป็นกล่องเป็นปุ่มได้เลย

ขึ้นไปด้านบน