Inner & Outer Values of the Display Property
Articles Blog

Inner & Outer Values of the Display Property


(upbeat music) – The display property in CSS is one of those properties
that we’ve had for a long time, since the very beginning,
and we use it quite a bit. And it does, sort of,
several different things that can be confusing, the
way that they interact. And there’s something cool
coming down the pipeline, where we’re starting to get more powerful and explicit values for display, and the ability to
combine them in new ways. And I want to show you how that works. Two of the values that we’ve
had right from the beginning, and use quite a bit, we have display inline and display block. And both of those values are
part of what we call, flow. Those are two different ways that elements can be in the flow. They can be block elements in the flow, or inline elements in the flow. Sometimes we also refer
to this as normal flow. And normal flow is the default on the web. Every time we are not
in, say, grid or flex, or some other layout system,
we’re in flow layout. And that’s why it’s called normal flow. It’s sort of the air we breathe in CSS. And normal flow is pretty cool. The main thing that it does, is when something changes size, everything else is able to move. And the two types of flow,
we can see there, right away. We have block elements
and inline elements. And the inline elements are able to wrap, and they make their boxes bigger. The block elements create these boxes that always have this consistent square or rectangular shape. And we can see those boxes
getting bigger and smaller to contain the inline
elements inside of them that are able to wrap around corners. And, so, you can see
this link doesn’t have a consistent rectangle shape, that shape can break and
wrap around a corner. Flow is this cool layout system that we’ve never really named very often. It’s usually just there. It’s just the way the web works. But we’re starting to be able to name that and say this is flow. There’s two types of flow,
there’s inline flow and block, or that’s the two types
of elements in the flow. And when we set inline
or block in the flow, we’re defining how an element
relates to its context. If the context is flow layout system, then every element in that flow layout is going to be either an inline
element or a block element. So, these are called outside values, because they define the
outside box of the element we define them on. So, when we say p display
block, which is the default, but we’ll just say it here. That display block says
that that is going to be a block-level element, and it should create that box. And we can also set that to inline, and suddenly all of
these are inline elements and it looks like a mess. Block and inline give
us these outside values describing the box that’s created for an element in the flow. But, we also have the other values, like flex and grid and table,
that do something different. They’re not describing the outside box, most of these, by default,
create a block box. You get a block with flex on the inside, if you set display flex. And you get a block
with grid on the inside, if you set display grid. And you can also to
inline-flex and inline-grid, and I’ll get to those in a bit. Flex, and grid, and table
are describing inside values of display. And flow is one of those values. Flow is similar to flex, grid, or table. And now, we’re starting to be
able to set that explicitly. We can use the flow keyword
to say this is not a grid, this is not a Flexbox,
this is a flow element. This is creating a flow layout context. And that’s useful if the element is set to grid somewhere else, and we want to set it back to flow, we can now do that explicitly. It makes this more explicit. It gives us a little bit more control over what we’re doing here. And a little more clarity
over what we’re doing here. We still have those two,
the outside and the inside types of display. And then we get to these
values, like inline-block, or inline-flex, or
inline-grid, inline-table. We’ve got a set of these. And what they’re trying to do is combine how the outside and the
inside are used together, but all in one keyword,
strung together with a hyphen. So, we get inline-block,
creates an inline box with block on the inside. Inline-flex creates an inline
box with flex on the inside. So, we can start to mix and
match outside and inside values, but only using these
very specific keywords. Inline-block is also weird,
because it does something else. If we have an inline-block element, let’s actually float this SVG, and we can see that a floated element breaks out of its box container. And one of the weird
things about inline block is that if we set
inline-block on the container, suddenly it wraps around all
of the floats on the inside, and it creates a new context. And this is called block
formatting context. And there’s several
things that trigger it. We can also, instead of
using display inline-block, we can use overflow hidden
or any overflow value that isn’t visible. And there’s a few other
ways that we can create block formatting context. Block formatting context
basically contains a new layout. That’s the idea behind it. If we set all of these block elements to display inline-block, we can see that a few things change. The margins between them double. And what’s happening is margins that normally collapse together, are no longer collapsing together. So, that’s also part of this
block formatting context. And that’s a useful thing to
be able to turn on and off, and it’s a little bit weird that it’s controlled in
these unexpected ways and not explicitly. So, that’s a new thing
that we’re getting also. That’s now called flow-root. So, down here, rather than
saying overflow hidden, or display inline-block, we
can say display flow-root. And that also works to contain the flow. It creates a block formatting context. So, flow-root and flow are both
new values that we’ve added to get at some of the things
that have been implicit before. That’s still dealing with
this outside and inside, that we’ve always only been
able to combine with a hyphen. Inline-block, inline-flex, inline-grid. And these are now referred to as the legacy values of display, and they’re being replaced
by a more explicit syntax, where we can combine multiple values in the display property. Instead of saying display inline-block, we can say display inline flow-root, as two separate values, one is describing the
outside box, that’s inline, and one is describing the inside box. And we can also, instead
of having to do flow-root with inline, we can do
flow-root with block. And that’s more what we
expect in some cases. So, we can start to
combine them in new ways because we’re no longer
relying on keywords that put them together for us, we’re instead, able to put
them together ourselves. And that means some of the
old values that we have now can be stated more explicitly. So, where we used to say block,
we can now say block flow. Where we used to say inline,
we can now say inline flow. With all of these, flow is
the default inside value, if no inside is set. And generally, block is
the default outside value, if no outside value is set. So, instead of grid,
we can say block grid. Again, these single values will work, but the combined values are more explicit, if we want them, and can be combined in new ways. List-item is its own thing, and we can add list-item anywhere, separate form the outside and inside. What list-item does, is
it creates the marker box, the bullet point or numbering, depending what the context is. So, we can toggle list-item on or off, as well as setting the
outside and inside values. There are many other values of display. We can look through all of them. There are some weird ones
that we don’t use very often, like run-in and ruby, that do very specific things
and you should check them out. You can see here, a lot
of what we’re getting is new ways of combining them,
new ways of expressing these. We get flow, we get flow-root, and we can start to combine
them with other things. There’s also these display internal values that can be used in specific contexts, and some global values,
and a few other things. But, what’s really interesting here, is the new ability to start combining display values ourselves, rather than relying on hyphenated
values being given to us, which allows us to be more explicit, and also come up with new combinations that weren’t possible before. Now, this is something that
you might not use right away. It’s something that you might wait until there’s proper browser support. So, go check the browser
support before you use it. Have fun getting more
creative with your layouts. (upbeat music)

2 thoughts on “Inner & Outer Values of the Display Property

  1. This video is awesome and really explained to me the complex rules that I've known for years, but couldn't explain. Hopefully the new spec will make new web devs better at CSS and novices saner ๐ŸŽ‰โค๏ธ

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top