代码：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>Title</title><style>.nav{text-align: center;}.nav a{display: inline-block;width: 40px;height: 40px;background-color:#F7F7F7;border:1px solid #cccccc;text-align: center;line-height: 40px;text-decoration: none;font-size: 5px;color: #333;}</style></head>
<body><div class="nav"><a href="#">&nbsp;</a><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a><a href="#"></a><a href="#"></a></div>
</body>
</html>

结果图：

原因：

行内块元素的默认对齐方式是：与文字的基线对齐。
元素加入文字，导致没有加入文字的行内块元素对齐到文字的基线。

解决方法：

方法1.修改行内块元素对齐方法：加入：vertical-align ：bottom,
方法2：没有文字的元素加入

行内块元素加了文字会被挤下来的原因及解决方法。相关推荐

css行内块元素垂直居中
css行内块元素垂直居中 div里边有个img标签,要想让img垂直居中,需要给父盒子设置line-height=height img设置vertical-align:middle <div ...
css标签显示特性（块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例）
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 1. 块级元素(block-level) 常 ...
六、pink老师学习笔记——CSS三角形之美 margin负值之美文字围绕浮动元素行内块元素布局的巧妙运用
7. 拓展@ 7.1 margin负值之美 1). 负边距+定位:水平垂直居中咱们前面讲过, 一个绝对定位的盒子, 利用父级盒子的 50%, 然后往左(上) 走自己宽度的一半 ,可以实现盒子水 ...
【疑难总结】行内块元素文字和图片对齐问题
一张图片和一个已转换为行内块元素的span对齐时遇到的问题总结了一下如果是浮动的元素则不需要考虑该问题 1.父元素有font-size:0样式: (已为span设置文字大小) 给图片或span设置了 ...
090_块元素行内元素行内块元素空元素
1. 块元素指的是占据全部可用宽度的元素, 并且在其前后都会换行(display: block). 1.1. 定义整个文档(非常重要): <html></html> 1.2. ...
行内元素、块元素、行内块元素的区别
行内元素.块元素.行内块元素的区别一.前言 1.行内元素 2.块元素 3.行内块元素一.前言 HTML将元素分类方式分为行内元素.块元素和行内块元素三种.这三者是可以互相转换的,使用display ...
块级元素和行内元素，行内块元素
在学习 CSS 的时候发现,发现有些标签会独占一行,典型的例如 <div> 标签.而某些不会独占一行,典型如 <span> 标签.其实这是因为 CSS 的标签是有区分元素类型的 ...
【HTML5-小知识】块元素、行内元素和行内块元素
文章目录前言一.块元素.行内元素和行内块元素是什么? 二.块元素三.行内元素四.行内块元素总结前言 HTML常用标签掌握之后,应当进一步了解元素的三种类型,块元素,行内元素,行内块元素, ...
常见的块级元素、行内元素、行内块元素
一.块级元素 block 1. 特点: 自动换行独占一行可设置宽高默认宽度为父元素的宽度 2.常见块级元素 div.p.h1~h6.ul.ol.dl.li.dd.table.hr.blockqu ...

行内块元素加了文字会被挤下来的原因及解决方法。

原因：

解决方法：

行内块元素加了文字会被挤下来的原因及解决方法。相关推荐

最新文章

热门文章