block和inline-block与width：100％之间的区别是什么？ [英] What is the difference between block and inline-block with width: 100%?

问题描述

我最近试图找出什么时候使用 inline-block 是合适的。它们似乎比只是一个块元素更有用。事实上，一个inline-block元素似乎能够做一个块元素可以做的任何事情，但是有一些额外的样式。

有任何原因一个元素 display：inline-block; width：100％; 与任何不同于 display：block; 的元素？ （除了一个更长的事实）

我一直在研究这个主题，通过阅读 w3c建议。我不能找到一个区别。

解决方案

你说的是非常正确的：inline-block元素似乎能够做任何块元素可以做，但有一点额外的造型。

块级元素参与块格式化上下文，并且内联块参与内联格式化上下文（尽管它本身可以创建一个就像块级元素一样）。请参见第9.4节。基本上，这意味着内联块的行为好像是文本，这反过来意味着大多数属性通常适用于文本也将应用于内联块。这些属性包括 text-indent ， text-align 和 vertical-align 等。

这可能会导致不希望的副作用，您可以通过不使用 display：inline-block 首先。请参见此问题一个有趣的例子。

内联块框的框模型也与块框不同。 第10节包含所有详细信息，但主要区别是：

• 没有 width：100％声明，




• 由于内联块在内联，所以不能以自动左右边距为中心。您可以改用 text-align：center 。不言而喻，它必须在同一行上没有任何文本，但是如果你设置 width：100％

  /TR/CSS21/box.html#collapsing-margins\">草图折叠。

're尝试创建一个基于块的布局，你应该使用 display：block 。一般来说，在决定两者之间时，应该总是默认为 display：block ，并且只选择 display：inline-block 如果你有一个很好的理由（和没有，阻止利润率崩溃不是我认为一个很好的理由）。

I've recently been trying to figure out when it is appropriate to use inline-blocks. They seem to be far more useful than just a block element. In fact, an inline-block element seems to be able to do anything a block element can do, but with a little extra styling.

Is there any reason an element with display: inline-block; width: 100%; is any different than an element with display: block;? (Aside from the fact that one is longer?)

I've been researching this topic by reading the w3c recommendation. I can't seem to find a difference.

解决方案

What you said is pretty much correct: "an inline-block element seems to be able to do anything a block element can do, but with a little extra styling." However, there's a catch.

A block-level element participates in a block formatting context, and an inline block participates in an inline formatting context (although it may itself create a block formatting context just like a block-level element). See section 9.4. Basically, this means an inline block acts as though it were text, which in turn means most properties that usually apply to text would also apply to an inline block. These properties include text-indent, text-align and vertical-align, among others.

This can cause undesired side effects which you can easily prevent by not using display: inline-block in the first place. See this question for an interesting example of what can happen.

The box model for inline block boxes also differs somewhat from that of block boxes. Section 10 contains all the nitty gritty details, but the main differences are:

• Without the width: 100% declaration, as you may have suspected, an inline block will shrink to fit its contents.

• Because an inline block flows inline, you can't center it with auto left and right margins. You use text-align: center instead. It goes without saying that it must then be on its own line with no text surrounding it on the same line, but if you're setting width: 100% then this won't be a problem.

• Inline blocks are never affected by margin collapse.

If you're trying to create a block-based layout, you should be using display: block. Generally speaking, when deciding between the two, you should always default to display: block, and only choose display: inline-block if you have a very good reason to (and no, blocking margin collapse is not what I would consider a good reason).

这篇关于block和inline-block与width：100％之间的区别是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！