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

[00:00] In this video, I want to go over the three most used display properties in CSS when building out your Web application or other HTML projects. Those three main display types are inline, inline-block, and block. Each one respects a different set of rules and allow customizations in different areas.

[00:17] The first example I want to go over is the inline type of display. You can see in my HTML example that I have put a blue border around my span tag that has the display type of inline. We'll go ahead and add some margins to this span so that we can see what rules it does and doesn't respect.

[00:35] When we add a margin left of 10 pixels, you'll see that the span moves over 10 pixels from the text to its immediate left. Similarly, when we add a margin right of 10 pixels, we'll see that the text to the right of the span also moves over 10 pixels. We can also add padding to the left and right. We'll see that the text inside that blue border will respect those rules.

[00:56] However, the display type of inline does not respect top or bottom margins, which we can see an example here by adding a margin top 50 pixels and notice no change in our HTML. It also does not respect width and height rules, which we can also see by applying a width of 500 and a height of 200 and noticing that our blue border box doesn't change at all.

[01:17] Alternatively, with our next display type of inline-block, we have a little bit more say in regards to the top, bottom, width, and height of the element.

[01:25] You'll notice that unlike before, we can add a margin top of 20 pixels and we'll notice that our red box, which has the display type of inline-block is going to go ahead and put a 20 pixel space between itself and the text above it.

[01:37] Next, if we add a margin bottom of 20 pixels, we'll notice that space is also respected. We can do the same thing with left and right just like with our inline display type.

[01:47] This time, when we make a width of 200 pixels, we'll see that our red box goes to 200 pixels wide, and when we add a height of 50 pixels, we'll see that our red box goes to 50 pixels high. However, it still respects the inline properties of allowing other elements to its left and right.

[02:03] Our last display type of block follows all the same properties and rules as inline-block. However, it forces a line break after the element. We can see this in the example of our green border box with the display type of block where it allows no elements to its left or right.

[02:18] Even when we go in there and change the width to 50 pixels, we still have empty space to the right because of the line break and the text won't start until the next line down.

[02:27] Different elements have default display types. It's important to know which when designing your HTML. For example, paragraph tags and divs have display type block by default and you'll need to manually change them by adding CSS classes if you want them to behave differently.

[02:42] Alternatively, span classes have a default type of inline. If you want them to behave like paragraphs or divs, you'll have to change them manually with CSS classes, as well.