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.
Using the sample HTML code above, you get the following page render as shown below.
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.
With the CSS display property set to “inline”, the HTML page displays the paragraph tags on the same line as shown below.
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.
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.
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.
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.
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.
- The Beginners Guide to CSS Float
- How to Build Your Own CSS Grid Container
- Advanced CSS Grid and Flexbox
- Easy to Follow CSS Float Layout Examples
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.
