行内块元素

本文将讨论 inline-block 元素的属性。它是 CSS 中一个非常有用的属性。我们可以将其应用于各种标签。它是 CSS display 属性的一部分。

用途

应用上述属性后，元素将为其子元素表现得像内联和块一样。让我们理解内联元素和块级元素。

内联元素

不以新行开始的元素称为内联元素。它们作为主文本的一部分组合在一起，而不是一个独立的操作。这些元素仅占用所需空间。可以为内联元素添加左右内边距，但不能为内联元素的顶部或底部内边距或外边距添加高度。

内联元素示例

<span>, <a>, <code>, <strong>, <img>, <cite>, <button>, <input>, <textarea>, <select>, <small> 是一些内联标签。

示例

输出

块级元素

以新行开始的元素称为块级元素。块级元素会占用其内容可用的全部宽度。与内联元素不同，这些元素存在顶部和底部外边距。块级元素只能出现在 body 标签内。块级元素创建的结构比内联元素大。

块级元素示例

<div>, <p>, <li>, <main>, <nav>, <ul>, <form>, <video>, <table>, <aside>, <article> 是一些内联标签。

示例

输出

行内块元素

inline-block 的 display 值的工作方式类似于 inline，但有一个例外：该元素的高度和宽度可以修改。

示例

输出

下面是使用页面上所有元素的输出文件

代码