คิดอยู่นานละ ว่าทำงานด้านนี้ จะมาแลกเปลี่ยนความรู้เรื่องนี้กับคนอื่น
การเขียน css บางครั้ง เราน่าจะรู้ก่อนว่า สิ่งที่เราจะกำหนดลงไปนั้น มันจำเป็นหรือเปล่า
ซึ่งตอนแรก ๆ ที่เขียน css เป็นคนที่ชอบใส่
display:block;
บ่อยมาก แต่หลังจากมาอ่านบทความต่าง ๆ ทำให้ทราบว่า ที่เราใส่ลงไปบางครั้ง
มันไม่จำเป็นเนื่องจาก tag html บางตัวนั้น มีคุณลักษณะของมันเป็น
block อยู่แล้ว
ซึ่งหลัก ๆ แล้ว จะมีสองแบบ คือ
block และ
inlineโดยความแตกต่างของมันก็คือ
block- จะขึ้นแถวใหม่
- สามารถกำหนด height , width , line-height และพวก margin-top , margin-bottom ได้
- width (ความกว้าง) ของมัน จะเป็น 100% ที่มันจะสามารถกว้างได้
โดย tag html ที่มีค่าเป็น block อยู่แล้ว ก็จะมีพวก <div>, <p>, <h1>, <form>, <ul> แล้วก็ <li> เป็นต้น
มาดูทางฝั่ง
inline บ้าง
inline- จะเริ่มต้นแถวเดิม
- ไม่สามารถเปลี่ยนแปลง height , width , line-height และพวก margin-top , margin-bottom ได้
- width (ความกว้าง) ของมัน จะกว้างเท่ากับความยาวของตัวอักษร หรือภาพ
โดย tag html ที่มีค่าเป็น inline อยู่แล้ว ก็จะมีพวก <span>, <a>, <label>, <input>, <img>, <strong> แล้วก็
เป็นต้น
ทีนี้เรามาดูกันว่า เมื่อไหร่เราถึงจะเปลี่ยนจาก [i]
block [/i]เป็น
inline หรือเปลี่ยนจาก
inline เป็น
block- อยากให้
inline ขึ้นบรรทัดใหม่
- อยากให้
block อยู่บรรทัดเดิม
- ต้องการกำหนด width (ความกว้าง) height (ความสูง) ของ
inline- ต้องการกำหนดสี background แค่พอดีกับตัวอักษรให้กับ block ที่ไม่ได้กำหนดความกว้าง
ที่จริงการใส่
display:block;
ให้กับ tag html ที่เป็น block ก็ไม่ได้ทำให้ layout ของเราเสียหายแต่อย่างใด
แต่มันจะทำให้ file css มีขนาดใหญ่ขึ้นด้วยความไม่จำเป็นนะครับ

จะพยายามเขียนอย่างอื่นเพิ่มเติมอีก ถ้าไม่ขี้เกียจนะครับ หรือใครมีเรื่องไหนอยากให้เขียนก็บอกกันนะครับ
ถ้ารู้เรื่อง จะมาเขียนอธิบายให้ฟัง