# THE DIFFERENCES BETWEEN A BLOCK ELEMENT, INLINE ELEMENT AND INLINE-BLOCK ELEMENT

Each HTML element comes with a default display property, and without grasping the reasoning behind it, working with CSS can become challenging.

So, in this post you are going to learn:
* Block element
* Inline element and
* Inline-block element

## BLOCK ELEMENTS
These are elements in HTML that create a block structure in a document. Block elements always start on a new line. They will take up the full width available (stretch to left and right) , although occupying the entire width of their parent container.

Block elements means that once they’re placed in the template, they will each take the full-width of a complete row.

**Some common block elements include:**
* `<div>:` A generic container.
* `<p>`: Paragraphs of text.
* `<h1>` to `<h6>`: Headings.
* `<ul>` and `<ol>`: Lists.
* `<table>`: Tables.
* `<section>, <article>, <header>, <footer>, * <nav>`: Semantic HTML elements.

**When to use Block Elements:**
You should use the inline-block display property when you need elements to:
* **Creating visual structure:** Use block-level elements like ``<div>,`` ``<section>,`` ``<article>,`` etc. to create clear sections or modules within your content.
This helps organize and structure your page layout.
* **Grouping related content:** Block elements like ``<p>`` (paragraphs) group paragraphs together.
``<ul>`` and ``<ol>`` (unordered/ordered lists) group list items logically.
* **Semantic structure:** Use semantic block elements like ``<header>,`` ``<footer>,`` ``<nav>,`` etc. to define meaningful sections of your page.
This improves accessibility and SEO.

**Use Cases for Block Elements**
* **Page Layout and Sectioning:** Block elements are ideal for dividing a webpage into logical sections.
* **Headers and Footers:** Block elements are perfect for headers and footers, as they span the full width and contain content like navigation, logos, or copyright text.
* **Forms:** Forms use block elements to stack inputs, labels, and buttons in an organized manner.
* **Main Content:** Block elements structure the primary content of a webpage, such as text and media.

## INLINE ELEMENTS
You saw above an example of block-level elements. On the other hand, there are also some inline-level elements by default (like ``<span>`` or ``<a>`` tags), which can directly be placed side by side.

Inline elements only take up the width necessary to display their content. They do not start a new line afterwards, thereby they can be placed side-by-side with other inline elements. They cannot have width/height and can only have left/right margins (no margin before or after, unlike block-level element) and padding.

But the downside of inline elements is that we can not apply width or height properties, they just don’t work with them. If you don’t know this information, then working with CSS can be really frustrating.

**Some common inline element:**
* ``<span>:`` For generic inline styling.
* ``<strong>,`` ``<em>``: To emphasize text (e.g., bold or italicized).
* ``<b>,`` ``<i>:`` For text styling (non-semantic bold or italic).

**When to use Inline Elements:**
* **Styling small portions of text:** Use inline elements like ``<span>`` to apply styles to specific parts of text without affecting surrounding content.
This is useful for highlighting or changing colors of specific words or phrases.
* **Creating links:** Inline elements like ``<a>`` (anchor tags) are used for creating hyperlinks.
* **Form elements:** Inline form elements like ``<input>,`` ``<label>,`` etc. are used within forms.
* **Images and media:** Inline elements like ``<img>`` are used for embedding images.
* **Inline scripts:** ``<script>`` tags are inline elements used for including JavaScript code.

**Use Cases for Inline Elements:**
* **Formatting Text:** Use inline elements to style or emphasize specific parts of text within a paragraph or heading.
* **Adding Hyperlinks:** The ``<a>`` tag is an inline element used to create links within text or other inline elements.
* **Styling Inline Sections:** Use inline elements like ``<span>`` to apply specific styles to part of a sentence or text.
* **Inline Forms and Buttons:** Inline elements like ``<label>`` or ``<button>`` can be used within block elements to create form controls that don't break the layout.

## INLINE-BLOCK ELEMENT
This element takes the benefits of both block and inline-level elements. An inline-block element is a combination between inline and block elements. It behaves like an inline element by flowing with text and not starting on a new line, but it also allows for block element features, such as setting width, height, padding, and margins.

So if you use display inline-block:
* You will be able to apply width & height properties to elements, which we can’t do with inline elements
* You can also place those elements side by side, which we can’t do with block-level elements

**Common elements tags:**
* ``<span>:`` For inline text or styled sections.
``<a>:`` For links, particularly in navigation menus.
``<strong>,`` ``<em>,`` ``<b>,`` ``<i>:`` For emphasizing or styling inline text.

**When to use Inline-Block Elements:**
You should use the inline-block display property when you need elements to:
* **Align Horizontally (Side-by-Side):** Use inline-block when you want multiple elements, such as navigation links, buttons, or images, to appear next to each other horizontally without breaking the flow.
* **Maintain Block-Level Control:** If you need to control the width, height, padding, margin, or border of elements while keeping them inline, inline-block is the ideal choice.
* **Preserve Inline Behavior:** Use it when you want elements to flow within the text content or align with other inline elements but still behave like a block for styling.
* **Vertically Align Elements:** Inline-block allows for vertical alignment using the vertical-align property, which is not available for block elements.

**Common Use Cases:**
* **Navigation Menus:** create horizontal navigation menus where items have consistent styling and spacing.
* **Inline Form Elements:** Use inline-block for form inputs and buttons to align them neatly in a single line.
* **Image Galleries:** Create a grid of images that adjust dynamically while remaining inline.

Liked the article? **[Hack-md](https://hackmd.io/)** is a great platform that hosts thousands of great articles like this. Sign up for free today and enjoy!