The display property dictates how an element renders in the document flow and behaves with sizing.
block (<div>, <p>, <h1>): Starts on a new line and expands to fill the full parent width. Accepts width and height.inline (<span>, <a>, <strong>): Sits inline with text. Ignores width and height.inline-block: Sits inline with text, but respects custom width, height, padding, and margins!none vs visibility: hidden: display: none removes the element completely from page flow. visibility: hidden hides the element but keeps its empty space reserved..badge {
display: inline-block;
padding: 4px 12px;
background-color: #04AA6D;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: bold;
}
