Start with the display value
The CSS display property helps determine how an element participates in layout. Three useful values to learn first are block, inline, and inline-block. They affect whether an element starts on a new line, how it uses available space, and whether width and height settings apply in the way you expect.
Browsers give many HTML elements a default display value. Paragraphs usually behave as blocks, while links within a paragraph usually behave as inline elements. You can change those defaults with CSS. Display controls layout behavior, though; it does not change an element’s meaning. A link styled as a block is still a link.
Block: a new line and room to grow
A block-level element normally starts on a new line. The next block normally starts below it. With its width left at auto, a block generally expands to use the available width of its containing space. You can set its width and height, and its margin and padding affect the space around it.
Imagine a notice followed by a paragraph. If the notice has display: block, a background color, and padding, it forms a distinct area above the paragraph. Set its width to 300px, and the colored area becomes narrower rather than automatically stretching across all available space. It still starts on a new line.
“Block” does not mean “always as wide as the screen.” Its size depends on its containing element and other CSS rules. For instance, a block inside a narrow sidebar has less available width than one inside the main page area.
Inline: content flows with text
An inline element participates in a line of text instead of starting a new one. A link in the middle of a sentence is a familiar example. If there is not enough room, inline content can wrap onto another line. That makes inline a natural choice for styling a word or phrase without separating it from its sentence.
For a typical inline element, setting width or height does not give it a fixed box the way it would for a block. Left and right margin or padding can add space beside the content. Top and bottom padding may be visible, but they do not reliably push neighboring lines apart. If a highlighted inline phrase looks crowded between lines, increasing its vertical padding alone may not solve the spacing problem.
An inline element may span more than one line, so its background or border can appear in separate pieces across wrapped text. This is useful to remember when a short highlighted phrase looks fine but a longer one wraps.
Inline-block: stay in the line, keep a measurable box
Inline-block combines two behaviors: the element sits alongside surrounding inline content, but you can set its width and height like a block. Padding and borders contribute to a visible box. It is handy for a compact label or badge that should sit beside text while keeping consistent dimensions.
Suppose a label contains the word “New.” With display: inline, a specified width of 80px will not create a uniform label. Change it to display: inline-block, set width: 80px and add padding, and the label can occupy a predictable box while remaining on the same line if there is room. If there is too little room, it can move to the next line.
Two inline-block elements can also have a small gap even when you did not add a CSS margin. Whitespace between them in the page’s text can produce that gap. They align with the text baseline by default, which may make boxes of different heights appear uneven. Check whitespace and vertical alignment before assuming your width or margin rules are wrong.
Try the values in your browser
You need only a text editor and a browser for this exercise; no library or specific browser version is required. Make a page with a paragraph containing a short link, a separate notice, and two short labels side by side. Use your browser’s developer tools to inspect each element and see its computed display value.
First, give the notice a background color and padding, then switch its display value between block and inline. Watch what happens to the line breaks. Next, give a label a width and height, and switch it between inline and inline-block. Compare whether those dimensions take effect. Finally, narrow the browser window to see which content wraps.
Choose a value based on the layout you need: block for a separate section, inline for content that flows with text, and inline-block for a sized box that should share a line. When a result surprises you, inspect the computed display value and the element’s containing space before changing several CSS properties at once.
