Display & Visibility

The display property decides HOW an element participates in the page's layout, and it's more fundamental than most beginners realize. block elements (like <div>, <p>, <h1>) always start on a new line and stretch to fill their container's full width by default stacking vertically like paragraphs in a book. inline elements (like <span>, <a>, <strong>) flow within a line of text, sitting side by side, and importantly, width/height/margin-top/margin-bottom have NO effect on them. inline-block is a hybrid: it flows inline like text, but DOES respect width, height, and full margin/padding extremely useful for things like navigation links that need padding without breaking onto their own line. display: none completely removes an element from the page it takes up zero space, as if it was never in the HTML at all. visibility: hidden is different and often confused with it: the element becomes invisible, but it STILL takes up its normal space in the layout, leaving an empty gap where it would have been.