CSS显示：内联与内联块\[重复\]

的CSS CSS

乐米亚

2020-03-17

在CSS中，display可以具有inline和的值inline-block。谁能详细解释inline和之间的区别inline-block？

我到处搜索，最详细的说明告诉我inline-block放置为inline，但行为类似block。但这并没有解释“作为一个整体”的确切含义。有什么特别的功能吗？

一个例子将是一个更好的答案。谢谢。

第1935篇《CSS显示：内联与内联块\[重复\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
斯丁Gil 2020.03.17

Inline elements:

  1. respect left & right margins and padding, but not top & bottom
  2. cannot have a width and height set
  3. allow other elements to sit to their left and right.
  4. see very important side notes on this here.

Block elements:

  1. respect all of those
  2. force a line break after the block element
  3. acquires full-width if width not defined

Inline-block elements:

  1. allow other elements to sit to their left and right
  2. respect top & bottom margins and padding
  3. respect height and width

From W3Schools:

  • An inline element has no line break before or after it, and it tolerates HTML elements next to it.

  • A block element has some whitespace above and below it and does not tolerate any HTML elements next to it.

  • An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.

When you visualize this, it looks like this:

CSS块与内联与内联块

The image is taken from this page, which also talks some more about this subject.

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android