如何解决 inline & inline-block 的空白间隙问题？

最新推荐文章于 2024-09-10 14:41:34 发布

emmm459

最新推荐文章于 2024-09-10 14:41:34 发布

阅读量777

点赞数 22

文章标签： css

本文链接：https://blog.csdn.net/qq_63447955/article/details/142066630

版权

空白间隙产生的原因：

换行符和空格：当display:inline-block元素在HTML源代码中被换行或它们之间有空格时，浏览器会将这些空白符解释为文字空间，从而在布局中产生间隙。
字体大小不为 0 的父元素：如果父元素的字体大小不为 0（即父元素内包含文字），那么子元素之间也可能出现间隙。这是因为行内块级元素会受到父元素文字基线的影响，导致垂直方向上出现间隙。

解决空白间隙的方法：

方法 1： 给父元素设置 font-size: 0 ，再给需要显示文字的元素，单独设置字体大小。

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Font Size Example</title>  
<style>
.parent {  
    font-size: 0; /* 消除子元素之间的空白间隙 */  
    display: flex; /* 使用Flexbox布局来更好地控制子元素 */  
    align-items: center; /* 子元素垂直居中（可选） */  
    justify-content: center; /* 子元素水平居中（可选） */  
    padding: 10px; /* 为父元素添加一些内边距（可选） */  
    border: 1px solid #ccc; /* 为父元素添加边框以便于观察（可选） */  
}  
.child {  
    font-size: 16px; /* 为需要显示文字的子元素单独设置字体大小 */  
    margin: 0 5px; /* 为子元素之间添加一些间距（可选） */  
}
</style>
</head>  
<body>  
<div class="parent">  
    <span class="child">Hello</span>  
    <span class="child">World</span>  
</div>  
</body>  
</html>

方法 2： 父元素中设置 word-spacing 单词间距【注意要大于空白间隙的值】。

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Word Spacing Example</title>  
<style>
.parent {  
    /* 设置单词间距，这个值要大于由HTML空白字符可能产生的间隙 */  
    word-spacing: 10px; /* 例如，我们将单词间距设置为10像素 */  
    /* 以下样式是可选的，用于美化显示 */  
    text-align: center; /* 使文本居中显示 */  
    padding: 20px; /* 为父元素添加内边距 */  
    border: 1px solid #ccc; /* 为父元素添加边框以便于观察 */  
    font-size: 16px; /* 设置一个合适的字体大小 */  
} 
</style>
</head>  
<body>  
<div class="parent">  
    This is a sample text to demonstrate word spacing.  
</div>  
</body>  
</html>

方法 3： 手动去除标签之间的换行以及空格【及将标签写在一行】，会导致代码不美观，且可能会出现格式化代码后，标签又会换行【不推荐】。

<div><span>Hello</span><span>World</span></div>

方法 4： 通过为负值的margin或padding来抵消间隙。但这种方法需要精确控制，以避免产生不期望的布局效果【不推荐】。

.box {  
    margin-bottom: 20px; /* 假设每个盒子默认有底部外边距 */  
}  
  
/* 如果你想消除它们之间的间隙，可以这样做： */  
  
.box + .box {  
    margin-top: -20px; /* 第二个盒子向上移动，与第一个盒子的底部外边距重叠 */  
}

方法 5： letter-spacing 字符间距，但这个会导致重叠现象出现，个人使用无法达到预期效果(不推荐使用，不好把控)【不推荐】。

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Letter Spacing Example</title>  
<style>  
    .letter-spacing-example {  
        letter-spacing: 2px; /* 设置字符间距为2像素 */  
        font-size: 24px; /* 设置字体大小以便更清楚地看到效果 */  
    }  
</style>  
</head>  
<body>  
  
<p class="letter-spacing-example">This is an example of letter spacing.</p>  
  
</body>  
</html>

emmm459

关注

22
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
如何解决 inline & inline-block 的空白间隙问题？

* 设置单词间距，这个值要大于由HTML空白字符可能产生的间隙 *//* 为需要显示文字的子元素单独设置字体大小 *//* 为父元素添加边框以便于观察（可选） *//* 例如，我们将单词间距设置为10像素 *//* 为子元素之间添加一些间距（可选） *//* 为父元素添加一些内边距（可选） *//* 为父元素添加边框以便于观察 *//* 消除子元素之间的空白间隙 *//* 子元素垂直居中（可选） *//* 子元素水平居中（可选） *//* 设置一个合适的字体大小 *//* 设置字符间距为2像素 */
复制链接

扫一扫