When do you use inline-block?

display: inline-block is a classic CSS attribute value! It's not a new feature, and there's no need to worry about browser compatibility. Many developers use it intuitively. But let's take a closer look. In what circumstances does it work? When to choose it compared to other similar options?

Button

The most common answer I hear is: I always use it for buttons .

Ultimately, I think it makes sense, but it leads to a slight misunderstanding I think. The idea is that the element that wants to look like a button (may be used<a></a> ,<button></button> or other elements created) can be arranged inline like nature, but can have margin and padding. This is the part of the misunderstanding: display: inline; elements can still have margin and padding, and their behavior may be consistent with what you expect.

The tricky thing is:

• The block direction margin of the inline element will be completely ignored
• padding of inline elements does not affect the height of the text line

So while the style of the button itself is set fairly well, it may not be the case with the parent element and the surrounding text. Here is a demonstration:

Things get worse when the inline button starts wrapping:

So, I think using inline-block on the button is very reasonable. but……

Don't forget inline-flex and inline-grid

With display: inline-flex and inline-grid values, you will get the same good behavior as inline-block , but elements (usually buttons) can benefit from a more powerful inline layout system.

Take a button with an icon as an example, as shown below:

 <a data-line="" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" html="">.button svg {
  vertical-align: middle;
}</a>

This can never be completely correct...

But using inline-flex can easily solve this problem:

 .button {
  display: inline-flex;
  align-items: center;
}

With inline-flex or inline-grid you can have all the features of a flexbox or grid layout system in blocks in an inline orientation layout.

Blocks that can still be broken

The inline block element will respect the width. This is another difference between them and purely inline elements. People used to¹ to build a column layout system using inline blocks because it basically does what the float can do without worrying about clearing the float², allowing people to take advantage of a more elegant line breaking method than the float.

The idea that inline block elements are represented as columns that can be broken (even narrowed down to 1 column) still exists today because it is a trick that can be used in HTML emails to allow multi-column layouts to collapse into single columns on small screens without the need for media queries (some email clients do not support media queries).

Dan's example.

Conversion on inline elements

Inline elements cannot be converted. So if you need a conversion, you need to use inline-block .

Sub-elements that are not broken in the middle of themselves

You can use CSS columns on paragraph text, and you don't have to care whether any given paragraph is disconnected across columns. But sometimes CSS columns are used for blocks, which will be awkward. Assume that these blocks have their own background and padding. Disconnecting is very strange visually.

This is a weird trick I can't say I understand 100% but if you use display: inline-block; on these boxes (and probably use width: 100%; to make sure they keep the column width), then they won't break and the padding will be preserved.

How to quickly arrange lists horizontally

This is another very popular answer to my original tweet. List elements stack list items vertically, just like block-level elements. They are not actually blocks. They are display: list-item; , which is actually important here, as we will see. A popular use case is "When I want to arrange a list horizontally" .

So you have a list...

• Three
• Small
• pig

You want to change it to a line, you can...

 li {
  display: inline-block;
}

nailed it.

I quickly tried it out in VoiceOver, and the inline block list still declares elements as lists, but there is no bullets read aloud, which makes sense because they don't exist. This is the problem of changing the way the list items themselves are displayed to non- list-item : they lose their, ahem, list-item features.

Another way is to set the parent element as the flexbox container...

 ul {
  display: flex;
}

...This implements horizontal lines (flexbox default), but retains bullets because you don't change how the list items themselves appear. If you want to delete it manually, it's up to you.

Centered list

Speaking of lists, Jeff Starr just wrote a blog about lists in centered text, which can also become awkward. The embarrassment is that the text inside the list item can be centered, but the list item itself is still full width, creating a situation where the bullet remains aligned to the left.

Jeff's solution is to set the entire list as an inline block. This makes the list width as wide as the natural width of its content, allowing the bullet to leave the left edge and move with the centered content. As long as there are block-level elements in front and behind, this is a good solution.

As an alternative, if the goal is to reduce the width of the list to the width of the content, you can also achieve this without preventing the list from becoming a block-level element:

 ul {
  width: max-content;
  margin: 0 auto;
  text-align: left;
}

1. There is another tricky problem with inline blocks. Like inline elements, any space between them will actually render as a space. So if there are any spaces between them, two 50% wide inline-block elements will not be displayed in one line. The good news is that there are tricks to solve this problem.
2. I say "in the past" because, if you were to make a column system today, you would almost certainly use flexbox or grid - or not build "system" at all, because just using these syntax largely negates the need for the system.

The above is the detailed content of When do you use inline-block?. For more information, please follow other related articles on the PHP Chinese website!