display:inline-block详解

涡看你就不是好人呐

已于 2024-03-31 16:08:01 修改

阅读量597

点赞数 2

文章标签： css

于 2024-03-31 16:06:48 首次发布

本文链接：https://blog.csdn.net/m0_59508634/article/details/137202221

版权

display:inline-block; 是一个CSS样式属性，它结合了inline和block两个元素类型的特性。在HTML和CSS中，你可以使用这个属性来创建一个块级元素，但是它不会像普通的块级元素（如<div>）那样独占一行，而是会像行内元素（如<span>）那样与其他元素并排显示。

同时，inline-block元素可以设置宽度（width）和高度（height），就像块级元素一样。这使得inline-block成为一个非常有用的布局工具，特别是在需要创建复杂的布局，但又不希望元素独占一行的情况下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .parent {
  font-size: 0px;  消除间隙 
} */
        .my-element {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
        /* margin: -3px; */
        /* font-size:16px; */


        }
    </style>
</head>
<body>
    <!-- <div calss="parent"> -->
        <div class="my-element"></div>
        <div class="my-element"></div>
        <div class="my-element"></div>
    <!-- </div> -->
</body>
</html>

出现的问题：会显示间隙

有空格时会有间隙，可以删除空格解决；

//直接在HTML中移除元素间的空格、换行和缩进，这样就不会产生间隙了。

html
<div class="inline-block"></div><!--
--><div class="inline-block"></div><!--
--><div class="inline-block"></div>
//或者在父元素中使用注释来消除空白：

html
<div class="parent">
  <div class="child"></div><!--
  --><div class="child"></div><!--
  --><div class="child"></div>
</div>

margin正值时，可以让margin使用负值解决；

        <div class="my-element"></div>
        <div class="my-element"></div>
        <div class="my-element"></div>




        .my-element {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
        /* margin: -3px; */
        }

使用font-size时，可通过设置font-size:0、letter-spacing、word-spacing解决；

//使用 letter-spacing 和 word-spacing 调整的是文本字符或单词之间的空间，而不是元素之间的空间。因此，它们对于解决由HTML空白字符引起的间隙问题不是直接相关的。但是，你可以通过调整这些属性来微调元素内的文本布局。

//
.parent {
  font-size: 0; /* 消除间隙 */
}
.child {
  display: inline-block;
  font-size: 16px; /* 为子元素单独设置字体大小 */
}

涡看你就不是好人呐

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
display:inline-block详解

是一个CSS样式属性，它结合了inline和block两个元素类型的特性。在HTML和CSS中，你可以使用这个属性来创建一个块级元素，但是它不会像普通的块级元素（如）那样独占一行，而是会像行内元素（如）那样与其他元素并排显示。同时，元素可以设置宽度（width）和高度（height），就像块级元素一样。这使得成为一个非常有用的布局工具，特别是在需要创建复杂的布局，但又不希望元素独占一行的情况下。
复制链接

扫一扫