行内元素中去掉文字的上下间距,使得文字所在元素的高度同字体高度一致的方法...

之前在p这类块元素中的文字,给line-hight=1;就可以去掉文字自带的上下间距,

像这样:


最近突然发现这个方法在行内块和块元素上好使,可当用在span或者a这类内联元素上都不好使,除了转为块元素的方法来去掉上下间距,行高设置为1去不掉内联元素文字的上下间距。

像这样:

 

查阅很多资料之后,得出结论:
行内元素的高度是不受行高影响的,因此设置line-height=1只能影响行内元素在容器中所占据的高度(字号大小的高度),而自己本身的高度未曾改变,哪怕是超出了父容器的高度(在给行内元素设置了背景色之后就可以直观的看到)。

解决方法:

如果需要去掉文字的上下间距,使得文字所在元素的高度同字体高度一致,那么:

 1、使用非行内元素包裹文字(p、div等)

 2、给行内元素转为块或者行内块

 3、给行内元素浮动

之后再设置line-height=1 即可去掉文字上下的间距,大功告成。

 

转载于:https://www.cnblogs.com/Mr-Car/p/10689517.html

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

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

相关文章

VSCode的Teams插件

随着今年在线的Build大会的结束,又是一大波的 Teams 新功能,新工具,新SDK。我接下来几篇博客就会详细和大家一一介绍。我今天先从VSCode的插件开始。 打开VS Code,搜索Teams,就可以找到Microsoft Teams Toolkit插件&a…

使用Flow快速开发Teams小应用

继续我的上一篇博客,这篇继续介绍BUILD大会里的内容:Flow。 Flow是微软power平台的一个服务,通过简单的拖拽就可以完成一个业务逻辑的处理,现在Flow和Teams的结合十分紧密。我们来试一下。 先点击Teams左边的Flow菜单。 如果你的…

python正则中如何匹配汉字以及encode(‘utf-8’)和decode(‘utf-8’)的互转

正则表达式&#xff1a;  [\u2E80-\u9FFF]$ 匹配所有东亚区的语言   [\u4E00-\u9FFF]$ 匹配简体和繁体   [\u4E00-\u9FA5]$ 匹配简体   <input type"text" name"username" οnkeyup"valuevalue.replace([\u4E00-\u9FA5]$)"> 正则表…

【区块链】认识区块链的基本概念

2018年区块链技术风卷全球&#xff0c;似乎大家都在谈论区块链&#xff0c;那到底什么区块链&#xff0c;区块链到底能干什么&#xff0c;对普通人会有什么影响&#xff0c;很多人还是稀里糊涂&#xff0c;那么就谈谈我的一些理解吧&#xff0c;抛砖引玉欢迎探讨。 我是如何接触…

将Teams Template升级到dotnet core 3.1

为了方便开发者开发Teams应用&#xff0c;我在2018年做了dotnet c#的一套模板&#xff0c;这套模块一共有三种类型&#xff0c;一个是Teams OutgoingWebhook&#xff0c;一个是MessagingExtension&#xff0c;还有一个就是Tab。 今天特地去nuget上看了一下&#xff0c;下载量还…

【动态规划】cf1034C. Region Separation

质因数分解套路的复杂度分析的动态规划 题目大意 有一颗$n$个节点有点权的树&#xff0c;初始整棵树为$1$号区域&#xff0c;要求满足下列规则&#xff1a; 除非$i$是最后一个等级&#xff0c;否则每一个$i$级区域都要被分成至少两个$i1$级区域对于每种等级&#xff0c;每个点必…

【数据结构】线性表(一):顺序列表

线性表(linear_list)是最常用且最简单的一种数据结构&#xff0c;简言之&#xff0c;一个线性表是n个数据元素的有序序列。 例如&#xff1a;&#xff08;a1 , ... , ai-1 , ai , ai1 , ... , an)&#xff1a;ai-1 是 ai 的直接前驱&#xff0c;ai1 是 ai 的直接后驱。 并且&am…

校招需要看的书 巩固的知识

前言 感谢教练&#xff0c;学长们&#xff0c;队友&#xff0c;lollipop&#xff0c;猫哥&#xff0c;李哥&#xff0c;表哥&#xff0c;鸡哥&#xff0c;样样&#xff0c;咸糖&#xff0c;茗记&#xff0c;明沙&#xff0c;嘻&#xff0c;树佬(排名不分先后)等等太多太多的人的…

Teams Tab的Single Sign-On

在我写这篇文章的时候&#xff0c;这个SSO机制还是在 Developer Preview 阶段&#xff0c;可能在发布前还会有一些改进。不过我觉得这个功能很好&#xff0c;所以先和大家分享一下。 如果大家之前已经开发过Teams的tab应用&#xff0c;可能会发现如果你需要一个当前用户的toke…

算法引入

算法的概念&#xff1a; 解决问题的思路。 时间复杂度&#xff1a; 定义&#xff1a; 基本运算的执行数量。是算法效率的衡量的量。 计算准则&#xff1a; 基本操作&#xff1a;即只有常数项。复杂度认为1顺序&#xff0c;按照加法计算循环&#xff0c;按照乘法计算条件。按照最…

如何开发Teams Bot

很多朋友问我如何开发一个成功的Teams Bot&#xff0c;他们说Bot Framework SDK看起来简单&#xff0c;但是真要的去开发一款成熟的bot&#xff0c;很多地方还是不知道如何使用。我从最早的bot framework还在beta的时候开始用&#xff0c;后来framework经历了多次大的改动&…

P1579哥德巴赫猜想

写来自己学习用~ 题目内容&#xff1a; 1742年6月7日哥德巴赫写信给当时的大数学家欧拉&#xff0c;正式提出了以下的猜想&#xff1a;任何一个大于9的奇数都可以表示成3个质数之和。质数是指除了1和本身之外没有其他约数的数&#xff0c;如2和11都是质数&#xff0c;而6不是质…

在VSCode Remote环境下开发Teams Bot

我使用VS Code开发已经有蛮长一段时间了&#xff0c;时间长了&#xff0c;越来越喜欢VS Code&#xff0c;虽然有些时候会没有传统的VS方便&#xff0c;比如开发Azure Function时你需要编写一下launch.json&#xff0c;而且你需要手动启动StorageEmulator&#xff0c;但是也正是…

查看安卓APK源码破解

原文:查看安卓APK源码破解工具准备&#xff1a; <1>.android4me的AXMLPrinter2工具 <2>dex2jar <3>jd-gui 工具下载&#xff1a;http://download.csdn.net/detail/catshitone/8491347 开始&#xff1a; 第一步&#xff1a; 首先用解压软件&#xff08;如好…

Teams Bot开发系列:初识Bot

上次我们讲了Teams Bot开发的概述&#xff0c;讲了Azure Bot Service&#xff0c;Bot Framework SDK和我们自己的bot服务的概念&#xff0c;这篇文章就带大家看看Azure Bot Service和我们的bot是如何发生关系的。 我们自己开发的bot服务实际上就是一个api service&#xff0c;…

[环境搭建]SDN网络感知服务与最短路径应用

1.安装python模块networkxpip install networkx2.给Network_Awareness.py加修改权限chmod 777 Network_Awareness.py3.下载安装ryugit clone git://github.com/osrg/ryu.gitcd ryu sudo python ./setup.py install#若已安装ryu,删了再装&#xff0c; pip uninstall ryu4.修改“…

ubuntu16.04下安装opencv出现libgtk2.0-dev配置失败问题解决方法

第一次在ubuntu下安装opencv&#xff0c;遇到很多问题&#xff0c;特别是libgtk2.0-dev总是配置失败的问题&#xff0c;在网上也看到一些解决方法&#xff0c;自己也遇到一些比较奇葩的问题&#xff0c;故整理于此。 网上大部分的解决方案就是更改下载源&#xff0c;我看到一些…

03|模型I/O:输入提示、调用模型、解析输出

03&#xff5c;模型I/O&#xff1a;输入提示、调用模型、解析输出 从这节课开始&#xff0c;我们将对 LangChain 中的六大核心组件一一进行详细的剖析。 模型&#xff0c;位于 LangChain 框架的最底层&#xff0c;它是基于语言模型构建的应用的核心元素&#xff0c;因为所谓 …

selenuim自动化爬取汽车在线谷米爱车网车辆GPS数据爬虫

#为了实时获取车辆信息&#xff0c;以及为了后面进行行使轨迹绘图&#xff0c;写了一个基于selelnium的爬虫爬取了车辆gps数据。 #在这里发现selenium可以很好的实现网页解析和处理js处理 #导包 import timefrom selenium import webdriverfrom selenium.webdriver.support.wai…

Teams Bot开发系列:Activity处理流程

上篇文章介绍了什么是Activity&#xff0c;Turn&#xff0c;TurnContext和BotAdapter&#xff0c;这篇文章我们看看这些东西是如何窜起来的&#xff0c;他们是如何处理用户发给bot的消息的。 我们以一个最简单的bot&#xff0c;echo bot为例子&#xff0c;所谓的echo bot就是用…