EasyCode365EasyCode365

Basic visual formatting and positioning

CSS is not only about colors, fonts, and borders.

It also controls how elements sit on the page. Some elements stack on new lines. Some elements sit inside a line of text. Some elements can be moved from their normal position.

In this lesson, you will learn the basics of document flow, display, and simple positioning.

Why visual formatting matters

HTML gives your page structure.

CSS decides how that structure looks on the screen. For example, you might want a button-like link to sit beside another link, or a small badge to sit in the corner of a card.

To do that, you need to understand how elements behave before you try to move them.

What document flow means

Document flow is the browser's normal way of placing elements on the page.

In English and many other languages, content usually flows from left to right and from top to bottom. Elements appear in the same order as your HTML, unless CSS changes that behavior.

Most beginner layout problems happen when the natural flow is different from what you expected.

Block elements

A block element starts on a new line.

By default, it takes up the full available width of its parent container. The next element starts below it.

Common block elements include:

  • <div>
  • <p>
  • <h1>
  • <section>
Can edit
<div class="block-example">First block</div>
<div class="block-example">Second block</div>

<style>
  .block-example {
    display: block;
    margin-bottom: 8px;
    padding: 12px;
    background-color: #dbeafe;
    border: 1px solid #2563eb;
    font-family: Arial, sans-serif;
  }
</style>

Even though the text is short, each block still starts on its own line.

Inline elements

An inline element sits inside the current line.

It only takes as much width as its content needs. Inline elements behave like words in a sentence.

Common inline elements include:

  • <span>
  • <a>
  • <strong>
  • <em>
Can edit
<p class="inline-demo">
  This paragraph has
  <span class="inline-example">inline text</span>
  inside a sentence.
</p>

<style>
  .inline-demo {
    font-family: Arial, sans-serif;
  }

  .inline-example {
    display: inline;
    width: 200px;
    height: 80px;
    padding: 4px;
    background-color: #fef3c7;
    border: 1px solid #d97706;
  }
</style>

Notice that width and height do not control the inline element like they would on a block.

Inline-block elements

inline-block is a useful middle option.

An inline-block element can sit beside other content like an inline element. It can also use width, height, padding, and margins more predictably like a block element.

Can edit
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">JavaScript</span>

<style>
  .tag {
    display: inline-block;
    width: 110px;
    padding: 10px;
    margin: 4px;
    background-color: #dcfce7;
    border: 1px solid #16a34a;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    text-align: center;
  }
</style>

This is useful for badges, small navigation links, labels, and simple button-like elements.

Comparing block, inline, and inline-block

  • display: block starts on a new line and can use width and height.
  • display: inline stays in a text line and does not use width and height in the normal way.
  • display: inline-block sits in a line but still respects width and height.
Can edit
<div class="display-demo">
  <div class="item block-item">block</div>
  <span class="item inline-item">inline</span>
  <span class="item inline-item">inline</span>
  <span class="item inline-block-item">inline-block</span>
  <span class="item inline-block-item">inline-block</span>
</div>

<style>
  .display-demo {
    font-family: Arial, sans-serif;
  }

  .item {
    width: 130px;
    height: 44px;
    margin: 6px;
    padding: 8px;
    border: 2px solid #4b5563;
    background-color: #f3f4f6;
  }

  .block-item {
    display: block;
  }

  .inline-item {
    display: inline;
    background-color: #fee2e2;
  }

  .inline-block-item {
    display: inline-block;
    background-color: #dbeafe;
  }
</style>

The same width and height rules behave differently because the display values are different.

What positioning means

The position property controls whether an element stays in normal flow or moves from it.

Positioning uses offset properties:

  • top
  • right
  • bottom
  • left

These properties only work when the element has a position value that supports offsets.

This lesson covers static, relative, and absolute. There are also fixed and sticky, which are covered in a later lesson.

Static positioning

position: static is the default for HTML elements.

A static element follows normal document flow. The offset properties do nothing on it.

Read-only

Most elements should stay static unless you have a clear reason to move them.

Relative positioning

position: relative keeps the element in normal flow.

After that, you can use top, right, bottom, or left to move it visually from its original spot.

Can edit
<div class="row">Normal item</div>
<div class="row moved-item">Relative item</div>
<div class="row">Normal item</div>

<style>
  .row {
    width: 180px;
    margin-bottom: 8px;
    padding: 10px;
    background-color: #e5e7eb;
    border: 1px solid #6b7280;
    font-family: Arial, sans-serif;
  }

  .moved-item {
    position: relative;
    left: 30px;
    background-color: #fde68a;
  }
</style>

The relative item moves to the right, but the browser still keeps its original space in the flow.

Absolute positioning

position: absolute removes an element from normal flow.

Other elements act as if the absolutely positioned element is not taking up normal space.

Absolute positioning is useful for small placed details, such as badges, labels, icons, and close buttons.

It is not a good tool for building a whole page layout.

The nearest positioned parent

An absolutely positioned element needs a reference point.

It looks for the nearest ancestor with a position value other than static. A parent with position: relative is the most common choice.

If it does not find a positioned ancestor, it uses the page as its reference instead. That often makes the element appear far away from where you expected.

Runnable example: card badge

In this example, the card is the positioned parent and the badge is the absolute child.

Can edit
<div class="profile-card">
  <strong>CSS Course</strong>
  <span class="lesson-badge">New</span>
</div>

<style>
  .profile-card {
    position: relative;
    width: 220px;
    padding: 32px 20px;
    background-color: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    text-align: center;
  }

  .lesson-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 4px 10px;
    border-radius: 999px;
    background-color: #dc2626;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
  }
</style>

The badge uses the card as its reference because .profile-card has position: relative.

Common beginner mistakes

  • Adding width and height to inline elements: use inline-block or block when you need predictable sizing.
  • Using absolute positioning for full page layout: use normal flow first. Later, Flexbox and Grid are better tools for page layout.
  • Forgetting the positioned parent: add position: relative to the parent when an absolute child should be placed inside it.
  • Expecting relative positioning to move other elements: a relatively positioned element keeps its original space in the flow.
  • Using offsets on static elements: top, right, bottom, and left do not affect position: static.

Mini practice task

Imagine a .badge with position: absolute, placed inside a .card that has the default position: static.

Which element will the badge use as its positioning reference?

Check the quiz answers when you are ready.

Short quiz with answers

  1. Which display value lets elements sit side by side and still respect width and height?
  2. What is the default position value for HTML elements?
  3. What does position: relative do to the element's original space in normal flow?

Answers:

  1. inline-block.
  2. static.
  3. The original space stays reserved, even if the element is visually moved.

Mini practice task answer: because .card is static (not positioned), the badge skips it and looks further up for the nearest positioned ancestor. If it finds none, it anchors to the page, which often places it far from the card. Add position: relative to .card to make it the reference.

Small challenge

Style the notification card below.

Your goals:

  • Make .card the positioning reference.
  • Make .new-badge absolutely positioned.
  • Place the badge in the top-left corner of the card.
  • Give the badge a red background and white text.
Can edit
<div class="card">
  Inbox
  <span class="new-badge">New</span>
</div>

<style>
  .card {
    /* Make this element the positioning reference */

    width: 200px;
    margin: 32px;
    padding: 40px;
    background-color: #f3f4f6;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    text-align: center;
  }

  .new-badge {
    /* Remove this element from normal flow */

    /* Move it to the top-left corner */

    /* Add a red background and white text */

    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: bold;
  }
</style>

Summary

  • Document flow is the browser's normal way of placing elements on the page.
  • display: block starts on a new line and can use width and height.
  • display: inline stays in a text line and does not use width and height in the normal way.
  • display: inline-block sits in a line and still respects width and height.
  • position: static is the default, and offsets do not affect it.
  • position: relative moves an element visually while keeping its original space.
  • position: absolute removes an element from normal flow.
  • An absolutely positioned element uses the nearest positioned ancestor as its reference.