Positioning: inline-block: Web Design: CSS Part 19


Inline-Block Elements

Continuing on from the previous lesson POSITIONING: BLOCK AND INLINE, we are going to work with the less commonly used inline-block. inline-block works just like the name suggests. It’s a little bit block and little bit inline. The best way for you to understand this is to use it in an example. See the first example below to learn how an element that is converted to inline-block format will display.

inline block html

inline-block css

inline-block display

Disregard the line break tag in the paragraph. The purpose of it being there is to make the lesson images more visible. I left a few block elements from the previous lesson. We have a new p element with a span nested inside of it. The span has a class named “red-background“. Jumping over to our CSS code, we created a new .red-background class rule with a background color of red and a height of 80 pixels. The new declaration that converts the inline span element to inline-block is display: inline-block;. In the displayed page image, you can see the effect of the inline-block format. It acts like an inline element in the way that the surrounding text can display on the sides of it but still has some block features as well. If you resize the screen you can get a better idea of how the inline-block element and nearby elements change. There will be a short demonstration video at the end of this post. We have one more example below.


inline block css

inline-block display

In the final example, we have created another p element with a span nested inside of it. This time in our CSS code, we have also added a width declaration of 100px. FYI, I’ve also changed the font color for both of the new CSS class rules to white. You don’t have to do this; it’s just an issue I’m having with my new monitor settings. Back to the example, the height we specified this time is 200px. Looking at the displayed page image now, you can see that even with the width and very long height–it still acts the same way as it did in the first example. And when you resize the screen the surrounding text will move to accommodate the inline-block span.

That’ll about do it with the inline-block format. This is by far the least common used format in web design, but there may be times where it can be useful to you, and that’s why we covered it in this lesson. I want you to try one more thing before finishing up. The span in the final example with a class of .blue-paragraph originally was displayed as an inline element, and then we converted it to inline-block. Change the value in the display declaration from inline-block to just block. What kind of result do you get now? I’ve included a 48 second video demonstration of our final examples and the effects of resizing the screen. You can see that below. As always, Thanks for reading, and I’ll see ya next time.

inline-block video demonstration

index.html Source Code

<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="my-styles.css">
<div class="div1">
<h1>The heading is a block element</h1>
<p>This paragraph is a block element.</p>
<p>We are converting <span class="red-background">THIS SPAN</span> to inline-block.<br />
When you resize the screen, notice how the inline-block element is affected.</p>

<p>Another example <span class="blue-background">SPAN</span> with a very large height declaration.</p>


my-styles.css Source Code

background-color: blue;
border: 2px solid black;
background-color: green;
border: 2px solid black;
background-color: green;
border: 2px solid black;
background-color: red;
color: white;
height: 80px;
display: inline-block;
background-color: blue;
color: white;
height: 200px;
width: 100px;
display: inline-block;

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: