为什么浮动&内联块导致不同的垂直类型？ [英] why float & inline-block cause different vertical type?

问题描述

这是我的病例代码。

我创建了一个 div ，其中包含元素 i 。 i 具有宽度和高度属性，我实现了它以不同的方式。所以，我遇到了行高问题。我对 float vs inline-block 有所了解。但是，究竟是什么导致了行高在我的情况？

解决方案

inline-block 被视为内联元素（如文本）。如果它比同一行中的其他内联元素更高，则会强制行高度更高。您可以使用 vertical-align：top | middle | bottom; 更改内嵌块元素的对齐方式（ vertical-align 这里： https://developer.mozilla.org / zh / docs / Web / CSS / vertical-align ）。

浮动元素只是推到一边或另一边，文本流在它周围。

Here is my case code.

I create a div which contain element i. The i has width and height attribute and I achieve it with different way. So ,I encounter the line-height issue. I know a little about float vs inline-block. But, What cause out the line-height in my case?

解决方案

inline-block is treated as an inline element (like text). If it is taller than other inline elements in the same line, it forces the line-height to be taller. You can use vertical-align:top|middle|bottom; to change the alignment of the inline-block element (more options for vertical-align here: https://developer.mozilla.org/en/docs/Web/CSS/vertical-align).

A floated element is just pushed to one side or the other, and the text flows around it.

这篇关于为什么浮动&内联块导致不同的垂直类型？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！