Select Page
css - CSS Display - HTML - Inline Block

CSS Display: Block, Inline, and Inline-Block Explained

The CSS display property provides you with various options to position content. In this short guide, the display inline block option will be explored and explained for those who are new to HTML and CSS.

Today,you will learn what a CSS block is and how it relates to your web design work. To provide visual context, sample code and images are provided for you. If you are brand new to HTML, you catch up with The Essential HTML Beginner Tutorial before getting started.

What is a CSS Block?

Before you get started with the display inline block options, you might want to know what a block refers to in HTML or CSS. Think of a webpage as a container for the content you want to display. The content inside has to be positioned in a way so it knows where to go on the page.

The page itself has lines and each line holds a block element. By default, these blocks take up the entire line they are placed on.

In the HTML document example below, you can see that there is a heading tag followed by a horizontal line tag. These are followed by two paragraph tags. Lastly, a single div element is added. This gives five HTML element tags within the body of the page.

HTML code showing how paragraph elements take up on row each without CSS alterations. display inline block blog content.

Using the sample HTML code above, you get the following page render as shown below.

Image of HTML render showing highlighted paragraph elements taking up their own row, or block.

With no CSS changes made, each block level element will simply take a line for itself. This can be changed with the CSS Display property.

How Do I Set the CSS Display Property?

Now that you can see how the default block level elements operate, you can alter their behavior. To do this, you will need to use the CSS display property. In the example below, the two HTML paragraph tags have been styled with CSS to use the inline display property.

CSS code showing the display property set to the value of inline. The display inline block value is not set at this time.

With the CSS display property set to “inline”, the HTML page displays the paragraph tags on the same line as shown below.

Sample HTML render showing how both paragraph elements now occupy the same row.

The display option of inline tells the element to fit itself on the same line. Since both paragraph elements use the inline display, they both sit on the same line with each other.

To show how this works with the elements, the paragraph tags have ids in the image below. The CSS styling still has the display set to inline for each.

Sample CSS code showing the display values of two paragraph elements set to inline. The display inline block value is not set here.

This will give you a result that looks much the same as before with both elements on one line.

Take a look at what happens when you set the second paragraph element to display as a block-level element again.

This CSS sample image shows one paragraph element with the display property set to inline while the other is set to block. This is not the display inline block value.

The second paragraph element has moved down to take up an entire line, or block, all of its own. In the next example, the display inline block value will be used.

Using the “display” element with the “inline-block” value can be confusing at first. The element will still be placed as an inline element meaning it will sit on the same line as adjacent elements. 

In this code example below, notice that in the first paragraph the “display” element is using the “inline” value, whereas the second paragraph is using the “inline-block” value.

A CSS example showing one paragraph element setting the display property to inline while the other is set to display inline block instead. The display inline block value section is colored purple for the example.
An HTML render showing how the display inline block value brings the second paragraph element up to the first. The display inline block value is only on the the second paragraph element.

The way the elements render on the HTML page appears to be no different than if both were using the inline display property.  A crucial difference between inline and inline-block is that the latter can be affected by width and height properties while still acting as an inline element. 

In the following CSS example below, multiple properties have been added to the second paragraph element to give a visual representation to the height and width effects the inline-block value allows.

CSS example showing how the display inline block property allows for width and height changes as opposed to the display inline value.

The HTML page will render using the above CSS, as shown below.

In the example above, the second paragraph still falls in line with the “inline” aspect. However, it also allows for additional styling to be applied with width and height values taking effect. In this way, using the display inline-block option can provide some interesting avenues for design.

The Power of CSS and Positioning

Knowing how the values of block, inline, and inline-block work with HTML elements is a great starting point for the concept of positioning. Taking that directly into another awesome beginner concept is the box model. Learning the Basics of the CSS Box Model helps you understand how margins, borders, and the content itself can be manipulated within the blocks.

Discussion of position and CSS nearly always involve the use of floats, grids, and flexbox. You can catch up on all the basics of these with the following article posts.

With any option you learn, know that each one will help build your web design toolkit. Have fun with the process and don’t be afraid to make mistakes as you go. Every failure and win is a learning point.

__________________________________________________________________

Why stop at just CSS? The creative ability in programming is allowing people to do even more with their ideas. If you want to advance your career,  take the first steps by learning to code. Having these skills can help you open doors to those new professional possibilities. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.

Start Learning Today!