You might have noticed in our previous examples that when we enter certain HTML tags, such as <p> or <h1>, the elements are each displayed on a new line. When we enter tags such as <a>, the elements are displayed alongside each other.

https://www.dinocajic.com/css-p6-image-styling/

Element Types

Elements, such as the paragraph element, are called block elements. Block elements will appear on a new line and will span 100% of the width of the container. Inline elements will be the width of the content they enclose. Since inline elements do not span the width of the container, un-styled inline elements will appear next to each other.

<p>I am a block element</p>
<a href="#">Inline Element</a>
<a href="#">Inline Element</a>

/* CSS */
p { background-color: coral; }
a { background-color: powderblue; }

Some common block-level elements are:

• <article>
• <div>
• <form>
• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
• <main>
• <nav>
• <p>
• <section>
• <table>

Some common inline elements are:

• <a>
• <button>
• <em>
• <i>
• <img>
• <input>
• <select>
• <span>
• <strong>
• <textarea>

Inline elements can behave as block elements and block elements can behave as inline elements with the use of the display property. We’ll set the display property value as inline for the paragraph tags and block for the anchor tags.

<p>I am a block element</p>
<p>I am another block element</p>
<a href=”#”>Inline Element 1</a>
<a href=”#”>Inline Element 2</a>
/* CSS */
p {
    background-color: coral;
    display: inline;
    }
a {
    background-color: powderblue;
    display: block;
}

The block elements now behave like inline elements and vice-versa. To combine the characteristics of both inline and block-level elements, we can use:

display: inline-block

We’ll look at the display property in more detail soon.

Floating Elements

In the previous section, we looked at how we can display block-level elements in line with each other, and inline elements on top of each other. We can have a lot more control using the float property. The float property is applied to element to which you want other elements to float next to. Let’s look at an example. If we applied a float: left to the div tag, the content next to it will appear to its right side.

<div class=”add-left-float”>
    The first container. This container will appear on the
    left side of the screen.
</div>
<span>
    This contains some inline text. Once the float has been
    applied to the previous container, my text will wrap to
    its right and it will float to my left.
</span>
/* CSS */
div {
    width: 200px;
    background-color: aliceblue;
    padding: 10px;
    margin: 5px;
}
.add-left-float { float: left; }

If there is space, all elements following the floated element will be subject to its behavior. Let’s add an <h2> element and see where it appears.

<div class=”add-left-float”>
    The first container. This container will appear on the
    left side of the screen.
</div>
<span>
    This contains some inline text. Once the float has been
    applied to the previous container, my text will wrap to
    its right and it will float to my left.
</span>
<h2>
    This content should appear below the floated div tag.
</h2>
/* CSS */
div {
    width: 200px;
    background-color: aliceblue;
    padding: 10px;
    margin: 5px;
}
.add-left-float { float: left; }

In order to display the <h2> tag below the content, like it normally would, we have to first clear the float property. Since we want the text inside the span tag to float to the right, we must clear the float inside the <h2> tag.

div {
    width: 200px;
    background-color: aliceblue;
    padding: 10px;
    margin: 5px;
}
.add-left-float { float: left; }
h2 { clear: both; }

We can also float the div element to the right of the span tag by applying the right float property.

<div class=”add-right-float”>
    The first container. This container will appear on the
    right side of the screen.
</div>
<span>
    This contains some inline text. Once the float has been
    applied to the previous container, my text will wrap to
    its right and it will float to my left.
</span>
/* CSS */
div {
    width: 200px;
    background-color: aliceblue;
    padding: 10px;
    margin: 5px;
}
.add-right-float { float: right; }