给 a 标签设置 display:inline-block 之后 a 整体下沉

news2025/1/11 19:44:56

今天给一个a设置宽高,前提是添加了display:inline-block;然后发下a没有与父元素div顶部对齐,反而下沉了。试了好多办法都没成功,然后在网上找的教程。
在这里插入图片描述

原因

1、问题就是出在了display:inline-block;语句上,行内块元素有一个基线,所有一行中的元素都以这条基线为准对齐。基线指的是一排字横排时下沿的基础线。这也是为什么a下沉了下来,就是因为a要以基线对齐。
2、另外我检查css样式的时候发现css初始化的时候设置了line-height:1.5。这样也会导致a下沉。

解决办法

1、可以设置vertical-align,默认是baseline,设置这个值,top,bottom,middle随便一个,就可以顶部对齐了。
2、使用float等其他方法替换inline-block。

reference:
1、多个div设置display:inline-block;以后,其中一个盒子写了文本以后会下沉的原理,讲解的很清楚的一篇博客;
#css中inline-block出现下移的情况
2、为什么display:line-block的a标签会加上文字之后会向下移动呢?
3、解决因inline-block元素导致的空白间距和元素下沉

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/616150.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用Python进行接口性能测试:从入门到高级

前言: 在今天的网络世界中,接口性能测试越来越重要。良好的接口性能可以确保我们的应用程序可以在各种网络条件下,保持流畅、稳定和高效。Python,作为一种广泛使用的编程语言,为进行接口性能测试提供了强大而灵活的工…

Redis:数据类型

一、Redis字符串(String) 1、String类型 String字符串:string类型是redis最基本、最简单的数据类型,一个key对应一个value。 String类型的二进制是安全的,可以包含任何数据,但是每一个value最大时512M 2、String命令 设置和获…

《人月神话》译文修订明细(6)-读者可以对照修改

《人月神话》译文修订明细(1)-读者可以对照修改 《人月神话》译文修订明细(2)-读者可以对照修改 《人月神话》译文修订明细(3)-读者可以对照修改 《人月神话》译文修订明细(4)-读…

前端面试题整理14

目录 1.什么是同步?什么是异步? 2.localStorage、sessionStorage和cookie的区别? 3.Vue中key的作用是什么? 4.支付流程是什么? 5.Vuex的模块化是如何做的? 6.Vite和webpack的不同?Vite的优…

BS LIS系统仪器数据采集方法

BS LIS系统仪器数据采集方法 BS LIS系统对检验仪器的数据采集主要通过串行口通讯、USB端口通讯、TCP/IP通讯、定时监控数据库和手工录入等几种方法。串行口通讯最为普遍,采用RS-232C标准,一般的仪器都支持此标准。定时监控数据库对仪器管理机上已有的检…

【Vue】Element Plus和Element UI中插槽使用

文章目录 前言一、两者的区别二、组件库三、具体讲解总结 前言 今天和大家讲一下Element Plus和Element UI这两个组件库中表格的插槽使用方法,一般情况下vue2使用Element UI这个组件库,表格组件的插槽的话一般都是使用v-slot,而vue3使用Elem…

如何进行有效的移动应用测试?10个步骤带你一战成神

移动应用的市场日益壮大,而随着这个市场的发展,如何有效地测试移动应用也成为了一个重要的问题。本文将为你提供一些关于如何进行有效的移动应用测试的建议,并提供一些实际测试例子。 1. 理解你的用户和使用场景 在进行移动应用测试之前&…

rror updating database. Cause: java.sql.SQLSyntaxErrorException解决方案

错误描述: ### Error updating database. Cause: java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near CONDITION 1 这里是因为字段名…

Linux多线程认识

目录 🐧一、什么是线程 1.1虚拟地址如何转换成物理地址 1.2多线程 1.3Linux进程vs线程 1.4从Linux内核和CPU的角度看线程 🐧二、Linux线程控制 2.1POSIX线程库 2.2线程异常 2.3线程终止 ①exit不可以用来终止线程 ②pthread_exit() ③pthread…

Revit干货|自动捕捉遇到困难?这份秘诀请收好!

在BIM行业里,Revit往往影响着我们的建模效率,尽管软件提供了许多功能,但在建模过程中还是会因繁琐的操作而浪费很多时间。 因此,在使用Revit建模时,我们需要掌握一些小技巧来提升效率,如快捷键的使用和工具…

早餐配送APP小程序开发 轻轻一点搞定营养早餐

早餐是一日三餐中最重要的一餐,需要营养添加。但是现在多数的年轻人因为快节奏的生活工作二忽视了早餐的重要性,没有时间做就对付几口很多人甚至不吃早餐。早餐预定配送APP小程序开发解决了上班族的早餐问题,不用排队到早餐店去挤着买豆浆油条…

Langchain学习笔记

Langchain学习笔记 1.环境2. 1.环境 1.创建虚拟环境,名叫langchain conda create -n langchain python conda activate langcahin pip install langchain pip install openai -i https://pypi.tuna.tsinghua.edu.cn/simple2.在jupyter中使用这个虚拟环境。 conda activate l…

DG4pros 1:500地籍精度免像控实验

前言 DG4pros是睿铂目前综合性能最强大的高端倾斜摄影相机,它完成了许多以前在业内人士认为难以做到或者不可能完成的项目。本期,我们实验的内容是1:500地籍精度的免相控作业。 DG4pros倾斜摄影相机 一.实验目的 本次实验共进行两组测试,分…

vue项目复制----复制一个项目为另一个项目仍然访问原来老项目代码

表现就如下边这张图,新项目名字叫pccs,旧项目名字叫vue-element-admin,能启动,运行成功,一切正常,但是你会发现仍然是老项目的。 解决办法:

Javascript的闭包,匿名函数,自动调用

这里写目录标题 验证文本框HTMLJavascript分析var引起的赋值错误最优的解决方案forEach(function(item){})最简单的方式,const/let 申明一个局部变量直接使用函数通过声明函数变量的方式定义函数申明匿名函数和自动调用函数的区别 在案例的基础上分析。 验证文本框 …

未来工业的新趋势:探索智慧工厂的创新之路

随着科技的不断进步和工业的快速发展,智慧工厂正在逐渐改变传统的生产模式,成为现代工业的新趋势。智慧工厂以数字化、自动化和智能化为核心,通过信息技术和物联网的应用,实现生产线的高效运行和优化管理,为企业带来诸…

贾跃亭带着汽车梦回来了,FF 91 正式量产售价 220 万元

就在最近,许久不见的贾老板贾跃亭再度登上热搜。 原因无他,其 5 月 31 日召开视频发布会,宣布法拉第未来 FF 91 开启首批量产交付。 这一向大家画了九年的汽车大饼终于正式落地。 期间 FF 91 因为资金困境多次跳票,但贾老板向我…

工业树莓派的Socket通信之旅:探索智能工业应用的无限可能

一、什么是Socket通信 Socket通信是一种网络通信协议,用于在计算机之间进行数据传输。它提供了一种可靠的、双向的、面向连接的通信方式。通过Socket,计算机之间可以建立起通信链接,并在连接上发送和接收数据。它可以用于不同的网络协议&…

初识MYSQL组复制MGR

注:本文翻译自https://dev.mysql.com/doc/refman/8.0/en/group-replication.html 背景 创建容错系统的最常见方法是使组件冗余,换句话说,可以删除组件,而系统应继续按预期运行。这就产生了一系列挑战,将这类系统的复…

数据结构与算法·第5章【数组和广义表】

数组 基本操作 InitArray(&A, n, bound1, ..., boundn)DestroyArray(&A)Value(A, &e, index1, ..., indexn)Assign(&A, e, index1, ..., indexn)数组的顺序表示 两种顺序映象的方式: 以行序为主序(低下标优先);以列序为主序(高下标优先)。 而 n…