【CSS】如何清除vertical-align属性产生的中间空隙

最新推荐文章于 2022-08-13 17:56:12 发布
最新推荐文章于 2022-08-13 17:56:12 发布
阅读量2.5k 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cnds123321/article/details/84639328
版权

在使用display:inline-block这个属性的时候，进行行内并排，往往不会按照你预期的方式进行布局排列。

下面看看这个例子出现的问题：

代码实例：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.container {
			border:3px solid #fdc72f;
		}
		.content_1 {
			display: inline-block;
			vertical-align:top;
			width:25%;
			background-color: #d64078;
		}
		.content_2 {
			display: inline-block;
			vertical-align:top;
			width:25%;
			background-color: #d64078;
		}
		.content_3 {
			display: inline-block;
			vertical-align:top;
			width:25%;
			background-color: #d64078;
		}
		.content_4 {
			display: inline-block;
			vertical-align:top;
			width:25%;
			background-color: #d64078;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="content_1">
			我是内容一。
		</div>
		<div class="content_2">
			我是内容二。
		</div>
		<div class="content_3">
			我是内容三。
		</div>
		<div class="content_4">
			我是内容四。
		</div>
	</div>
</body>
</html>

效果图如下：

本来每个div占宽25%应该把这一行占满，但是并没有，而且第四个div还跑到了第二行，除此之外，它们之间还存在着缝隙。

产生这些缝隙的原因是这中间有些空白字符。那么消除这些空白字符的办法就是给其父元素设置font-size:0。

代码如下所示:

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.container {
			border:3px solid #fdc72f;
			font-size:0;
		}
		.content_1 {
			display: inline-block;
			vertical-align:top;
			width:25%;
			background-color: #d64078;
		}
		.content_2 {
			display: inline-block;
			vertical-align:top;
			width:25%;
			background-color: #d64078;
		}
		.content_3 {
			display: inline-block;
			vertical-align:top;
			width:25%;
			background-color: #d64078;
		}
		.content_4 {
			display: inline-block;
			vertical-align:top;
			width:25%;
			background-color: #d64078;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="content_1">
			我是内容一。
		</div>
		<div class="content_2">
			我是内容二。
		</div>
		<div class="content_3">
			我是内容三。
		</div>
		<div class="content_4">
			我是内容四。
		</div>
	</div>
</body>
</html>

 

效果图如下：

当给父元素设置font-size:0后，发现文字消失了，结果变成了上图的样子。

是由于自身未对文字设置font-size，是继承了父元素的font-size，所以再给子元素赋值font-size就能够得到想要的结果。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.container {
			border:3px solid #fdc72f;
			font-size:0;
		}
		.content_1 {
			display: inline-block;
			vertical-align:top;
			width:25%;
			font-size:16px;
			background-color: #d64078;
		}
		.content_2 {
			display: inline-block;
			vertical-align:top;
			width:25%;
			font-size:16px;
			background-color: #d64078;
		}
		.content_3 {
			display: inline-block;
			vertical-align:top;
			width:25%;
			font-size:16px;
			background-color: #d64078;
		}
		.content_4 {
			display: inline-block;
			vertical-align:top;
			width:25%;
			font-size:16px;
			background-color: #d64078;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="content_1">
			我是内容一。
		</div>
		<div class="content_2">
			我是内容二。
		</div>
		<div class="content_3">
			我是内容三。
		</div>
		<div class="content_4">
			我是内容四。
		</div>
	</div>
</body>
</html>

效果图如下：

二木成林
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css vertical-align属性详细图解分析
12-03
vertical-align属性详细分析 最近几天仔细研究了一下vertical-align这个属性，结果让我大吃一惊，这个很“资深”的CSS标准竟然在各个浏览器里面的表现都各不相同。 　　vertical-align的值有点多，包括 baseline sub supper top text-top bottom text-bottom middle以及各种长度值（%，em，ex等等）。我先给大家看一个我觉得最夸张的值：bottom。代码如下： 复制代码代码如下:p { font-size: 18px; line-height: 36px; font-family: Tahoma, sans
IE6/IE7中li底部4px空隙的Bug
12-13
当li的子元素中有浮动（float）时，...经过测试发现：li的子元素浮动是这个bug产生的必要条件，这个bug产生的充要条件是li的子元素浮动并且li设置了以下CSS属性之一：width、height、zoom、padding-top、padding-botto
如何清除vertical-align属性产生的中间空隙
simple_T的博客
12-27 300
那么消除这些空白字符的办法就是给其父元素设置font-size:0。
vertical-align（取消图片底部的间隙）
weixin_45704506的博客
09-23 209
当直接设置图片就会出现下面会多出来一点的情况，不设置高度的情况下，下面会多一点 1、vertical-align这个是设置元素的垂直排列的. 用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐. 它的值比较多：baseline | sub | super | top | text-top | middle | bottom | text-bottom | inherit 比如说top就是垂直对齐文本的顶部 ...
CSS（布局）float（清除浮动）,position（垂直居中）,transform,vertical-align,精灵图，BFC
lightwine的博客
04-02 517
position CSS中Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。 ◆position:static　无定位 该属性值是所有元素定位的默认情况，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。 ◆position:absolute　绝对定位 使用position:absolute，能够很准确的将元素移动到你想要的位置。 ◆position:
CSS三角形、vertical-align、如何取消表单的轮廓线，单行、多行文字溢出如何操作
micoria的博客
01-21 285
三、三角形 网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。 一张图， 你就知道 CSS 三角是怎么来的了, 做法如下： div { width: 0; height: 0; border: 50px solid transparent; border-color: red green blue black; line-height:0; font-size: 0; } 我们用css 边框可以模拟三角效果 宽度高度为0 我们4个边框
vertical-align 图片底侧空白缝隙的问题
Potry Code的博客
07-10 7225
一、概述 vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。 所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。 然而默认的图片会和文字基线对齐 这样会造成一个问题，就是图片底侧会有一个空白缝隙。 代码如下所示： <head> <meta cha...
前端大厂最新面试题-css.docx
最新发布
06-06
10. vertical-align属性的默认值是baseline。 11. CSS的background-size属性能够缩放背景图像。 12. 把CSS3新增的background-size属性设为cover，能在保持原图像的宽高比的前提下，缩放到能放进背景区的尺寸。 13...
详解CSS清除图片下几像素空白间隙的方法
01-18
最近有伙伴问小编的问题： 页面排版的时候发现图片下面有那么1-2像素的间隙空白...img{vertical-align:top;} 除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的和值都可以 方法3 #qdxw{f
CSS图片下面有间隙的6种解决方案
01-19
在进行页面的DIV+CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於 该问题的解决方法...即设置图片的vertical-align属性为「top，text-top，bottom，text-
学习CSS需要知道的CSS基础知识
09-25
2. **文本属性**：`word-spacing`调整单词间距，`letter-spacing`改变字符间距，`text-decoration`添加下划线、上划线等装饰，`vertical-align`设置元素的垂直对齐，`text-transform`用于转换文本的大小写，`text-...
清除行内块间距(间隙)HTML/CSS
weixin_44763882的博客
08-20 2444
inline-block元素之间的间隙如何去除？ fonsize: 0
css布局实例之去除行内元素间的空白间隙
哆来咪er的博客
09-24 3283
我在这里总结一些工作中会遇到的css布局例子。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,
css---vertical-align的使用（去除图片底侧空白缝隙）
wind的博客
12-24 460
有宽度的块级元素居中对齐，是margin: 0 auto; 让文字居中对齐，是 text-align: center; vertical-align:垂直对齐，它只针对于行内元素或者行内块元素 默认情况下，图片会和文字的基线对齐，如图： 设置vertical-align后： 去除图片底侧空白缝隙 原因：图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。 导致图片底侧会有一个空白缝隙。 <!DOCTYPE html> <html lang="en"> &l.
vertical-align的使用及解决图片底部默认空白缝隙问题和图像与文本垂直方向居中对齐
做技术，坚持才是最重要的，一时的热情只是暂时的进步
10-26 735
一、vertical-align的使用        经常用于设置图片或者表单【行内块级元素】和文字垂直对齐 vertical-align属性值 basesline:默认，元素放置在父元素的基线上 top：把元素的顶端与行中最高元素的顶部对齐 middle:把此元素放置在父元素的中部 bottom:把元素的顶部与行中最低的元素的顶部对齐 二、解决图片底部默认空白缝隙问题      &n
css垂直居中布局的方法
web前端开发博客
09-28 263
上篇文章说到常见css布局水平居中的方法，前端开发css布局还有垂直居中，也是很常见的布局方法，本文分享3种垂直居中布局的方法，table-cell + vertical-align、absolute + transform、flex + align-items，很常见，很实用。 垂直居中布局方法一：table-cell + vertical-align 1 2 ...
使用vertical-align属性除去图片下的间隙
让世界更美好！
07-25 1148
当我们在一个元素中嵌入图片时, 会发现图片下面有一条空隙 &lt;style&gt; div { border: 1px solid red; background: blue; } &lt;/style&gt; &lt;div&gt; &lt;img src="https://images.cnblogs.com/cnblogs_com/libra-yong/991915/...
如何去除img标签默认的水平和垂直间距
duwei19870819的博客
07-04 1276
如何去除img标签默认的水平和垂直间距img标签默认间距产生去除img标签默认水平间距去除img标签默认垂直间距相关概念操作方法 img标签默认间距产生 当我们在页面内使用img标签引入图片时，我们写出如下代码： <div> <img src="./image/yellow_flower.jpg" alt=""> <img src="./image/yellow_flower.jpg" alt=""> </div> <div>
css高阶技巧（2）
zhaochen1127的博客
08-13 2635
css用户界面样式，文本框轮廓线去除，禁止拖拽文本域（resize），vertical-align属性应用，图片底部空白缝隙解决方案 ，如何让溢出的文字以省略号的形式显示，常见的布局技巧
css中vertical-align属性
03-16
CSS中的vertical-align属性用于设置元素的垂直对齐方式。它可以应用于行内元素和表格单元格等元素。通过设置不同的值，可以让元素在垂直方向上相对于其父元素或其他元素进行对齐，如顶部对齐、底部对齐、居中对齐等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值