Block Level Elements

HTML elements have a default display behavior: they are either block-level or inline. Understanding this is critical for layout.

Block-Level Elements

Block elements take up the full width available and start on a new line:

• <div>, <p>, <h1>-<h6>
• <ul>, <ol>, <li>
• <section>, <article>, <header>, <footer>

div {
    display: block;  /* Default for div */
    width: 100%;     /* Takes full width */
}

Inline Elements

Inline elements only take up as much width as their content and do not start on a new line:

• <span>, <a>, <strong>, <em>
• <img>, <code>

span {
    display: inline;
    /* Cannot set width/height */
    /* Vertical margin/padding has limited effect */
}

Inline-Block

The best of both worlds — flows inline but accepts width, height, and vertical margin/padding:

.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #3498db;
    color: white;
    border-radius: 100px;
}

Changing Display

You can change any element's display behavior:

/* Make a span behave like a block */
span.block { display: block; }

/* Make a div behave like inline */
div.inline { display: inline; }

/* Hide an element completely */
.hidden { display: none; }