Block and Inline Elements

Exercise

In the "index.html" file, replace the code with the following:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS</title>
  <link rel="stylesheet" href="./css/styles.css">
</head>

<body>
  <h1>Block vs Inline Elements</h1>
  <div class="block">DIVs are block elements by default</div>
  <h3 class="block">Headings are block elements by default.</h3>
  <span class="inline">Spans are inline elements by default.</span>
  <a href="https://www.google.com" target="_blank" class="inline">Links are inline elements by default.</a>
  <h2>Overriding the default behavior</h2>
  <div class="block display-inline">Using the display property, 
     the div is changed to an inline element.</div>
  <h3 class="block display-inline">Using the display property,
     the h3 is changed to an inline element.</h3>
  <span class="inline display-block">Using the display
     property, the span is changed to a block element.</span>
  <a href="https://www.google.com" target="_blank" class="inline display-block">
    Using the display property, the link is changed to a block element.</a>
</body>

</html>

Save.
If "Live Server" is not already running, right-click anywhere in the editor and select "Open with Live Server" from the context menu.
In the "styles.css" file, replace the code with the following:

.block {
  background-color: blue;
  color: white;
  margin-top: 10px;
}

.inline {
  background-color: red;
  color: white;
  margin-top: 10px;
}

.display-block {
  display: block;
}

.display-inline {
  display: inline;
}

Save.
In the browser, you should see the following:

Code Walkthrough and Explanation

Inline Elements

In CSS, an inline element is an HTML element that is formatted inline within the flow of text. This means that it is placed within the same line as the surrounding text, and any other inline elements, and will only take up as much width as it needs to display its content. Examples of inline elements include <span>, <a>, <strong>, <em>, <code>, and <img> elements. By default, inline elements do not start on a new line, but you can change this behavior using CSS properties such as display and float.

Block Elements

In CSS, a block element refers to an HTML element that is formatted visually as a block-level element, typically taking up the full width of its parent container and creating a new line after the element. Examples of block-level elements include <div>, <p>, <h1> through <h6>, <ul>, <ol>, and many others. Block-level elements are often used to create the structure of a web page, while inline elements are used for small-scale content and formatting within those structures. Unlike inline elements, block elements can have margins, padding, and borders applied to them, and can also contain other block or inline elements.

`display`

The display property in CSS defines how an HTML element should be displayed on a webpage. It determines whether an element should be treated as a block-level element, an inline-level element, or a combination of both. There are several values that the display property can take, including:

block: The element will be treated as a block-level element, meaning that it will take up the full width of its parent container and any following elements will appear on a new line.
inline: The element will be treated as an inline-level element, meaning that it will only take up as much width as necessary and any following elements will appear on the same line.
inline-block: The element will be treated as an inline-level element, but its contents will be treated as a block-level element. This means that the element will take up as much width as necessary, but any following elements will appear on a new line.
none: The element will not be displayed at all.

Other values for the display property include flex, grid, and table, which are used for creating more complex layouts.

Experiment with the Code

Try making the h1 element inline.

Video and Code References

Questions? Subscribe and ask in the video comments:

GitHub and Other References

Learn2BuildApps