行内块级元素和文本在同一行显示为什么会有底部边距呢

最新推荐文章于 2022-10-30 16:41:02 发布
最新推荐文章于 2022-10-30 16:41:02 发布
阅读量734 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： CSS属性 文章标签： CSS基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_26239917/article/details/88379445
本文探讨了CSS中垂直对齐属性vertical-align的作用及默认值baseline的概念，解析了元素在页面布局中与基线之间的关系，以及如何影响美观。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

先上图

在这里插入图片描述

后来发现是因为另一个属性的原因，叫vertical-align 简称vera

vera默认属性为baseline 啥是baseline

标准是小写x的底部就是baseline，是一条水平线

在这里插入图片描述

这空隙跟baseline有关系吗

肯定是有的

下面放图
在这里插入图片描述

对齐就对齐呗，空隙是谁？
是baseline和bottom的距离
在这里插入图片描述

没有图片的时候可能觉得空隙是应该有的，加了图片发现图片上下不对称，不符合美感，才觉得有问题

问题其实一直都在那里，你看或者不看，他都在那里

下一篇将会谈如何人性化地解决空隙

css学习
weixin_68658847的博客
09-03 776
基础css学习
CSS笔记(二) - 页面布局 盒子模型
JUN_7777的博客
02-08 2528
行内元素
块级元素包含的块级元素margin有空隙问题
darkCloudss的博客
05-31 546
块级元素包含的块级元素margin有空隙问题 在父元素中加font-size：0；即可 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能...
行内元素、行内块元素任意两者间为什么会有小间隙，如何解决
暴躁小猿的博客
10-30 176
2、给父元素设置 font-size：0，再给本身设置font-size。4、本身设置margin-left：-5px;3、本身设置浮动 float：left；行内元素、行内块元素任意两者间为什么会有小间隙？1、编辑代码时强制不换行。由于代码编辑行内/行内块时换行造成。
块级标签包含行内标签底部出现3px间隔的解决办法
weixin_34319111的博客
08-23 352
当块级标签（如div）内包含了行内标签（如img），则外层元素与内层元素底部会出现3px的间隔； 代码如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> &...
行内 / 行内块元素的默认间隙问题
底层码农
04-30 777
行内 / 行内块元素的默认间隙问题
消除行内元素底部间隙
zshsats博客
04-30 713
消除行内元素底部留白 行内盒模型 消除行内元素底部间隙： 原理： middle对齐的是整个大盒子的行高中心位置往下偏移1/2字体的高度 &amp;lt;style&amp;gt; *{ margin: 0; padding: 0; } html,body{ height: 100%; } .div1{ di...
关于css 行元素和块元素 相互转换 居中
09-24
相反，行内元素如`span`和`strong`，它们的内容显示在同一行内。行内元素的特点： 1. 同行显示，不换行。 2. 不允许设置高度、宽度及顶部和底部边距。 3. 宽度由内容决定，不可更改。 要将行内元素转换为块级元素，...
容器标签与块级标签和行内标签的区别
最新发布
06-09
行内标签不会像块级标签那样独占一行，而是与其他行内元素在同一行显示。它们的宽高由内容决定，无法通过 CSS 设置固定尺寸。常见的行内标签包括 `<span>`、`<a>`、`<strong>` 等。 - **内容依赖**：行内标签的大小...
【HTML+CSS】4.CSS布局：盒模型和定位
M&Q的博客
04-14 1961
之前讲到，样式是CSS语法的最小单元，每一个样式都由选择器和声明（规则）两部分组成，而声明又由属性和属性值组成。上一篇讲了选择器，这里就开始进入“属性”部分了。 要想灵活应用CSS设计出美观且多样的页面，就需要熟悉CSS的各类“属性”，CSS中包含超过100种属性，包括字体属性、文本属性、边框属性、边距属性、布局属性、定位属性、打印属性等。作为初学者，我觉得我们应该循序渐进，先集中熟悉最常用...
行内元素的默认的横向边距与纵向边距
xiongshiyuan的博客
02-03 420
行内元素在渲染是会默认添加右侧和底部边距，如果在多个图片排列时这种情况就比较明显，当我们需要在布局上完全无边距的时候就需要去除这些编剧 去除方法就是 // 在单元元素上添加下面对应的属性去除边距 // 去除横向边距 .x-noSpace { font-size: 0; } // 去除纵向边距 .y-noSpace { line-height: 0; } ...
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 2280
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
前端入门css学习笔记（十四）-----行内元素和行内块元素
m0_61656944的博客
01-13 161
几乎也是一样的检查方式，行内元素默认自带的属性是：display:inline 例如以下这几种是常见的行内元素： 注意：行内元素不能设置高度和大小！ 行内快元素：display: inline-block; 例如：<img> <imput>等标签就是行内快元素，可以设置高度和大小。 ...
css 让文字进行竖着书写， 附带个小知识，行内块元素添加文字之后底部对不齐的问题
业余前端的职业经历
09-07 835
就是如果是图片的话 baseline 默认元素放置在父元素的基线上 然后再仔细去看下上面的那张图片 你就会发现。但是细心的同学会看见那个 g字母底部会超出一部分（这个也是图片的那个白色节点的问题）其实这个问题 如果你觉得难写的话，只能说你想的复杂了，在文字排版中，如果元素的宽度不够的话那么文字会自动换行的，所以只要父亲元素的宽度不够两个汉字 那么它就会换行了，就这么简单。附带一个小东西 就是 我们在处理行内块级元素 如果元素中添加了文字话 就可能出现对不齐的问题。这个就是因为文字对齐的基准 不同导致。
【css】行内元素、行内块元素的默认间隙问题
汪小穆的博客
04-28 1万+
前言：我比较用喜欢行内元素，行内块元素来做横向导航，这样就不用再去担心浮动块级元素带来的不必要影响。但行内元素，行内块元素元素有个硬伤--有默认的间隙 一、行内标签元素出现问题 <body> <style> span { background:red; } </style> <span>行内元素</span&gt...
【疑难总结】行内块元素文字和图片对齐问题
weixin_45305844的博客
05-05 1162
一个图片和一个转换为行内块元素的span对齐时遇到的问题总结了一下 1.父元素有font-size：0样式： （已为span设置文字大小） 给图片或span设置了vertical：top后，图片的margin-top和padding-top可以调整（有效果），bottom不能调整（无效） 给图片或span设置了vertical：bottom后，图片的margin-bottom和padding-b...
块级元素在同一行展示的方法
热门推荐
null
07-19 2万+
&lt;div id="container"&gt; &lt;div class="div"&gt;1&lt;/div&gt; &lt;div class="div"&gt;2&lt;/div&gt; &lt;div class="div"&gt;3&lt;/div&gt; &lt;/div&g
inline-block的块下沉，间距问题，问题原理
如果不是现在，那是什么时候呢
04-06 1370
inline-block内联块元素：可以拥有宽，高的内联元素1、块下沉排列多个元素在一行时，也就是多个内联块元素并列时，会导致块下沉解决方案：与baseline有关 ，设置vertical-align：top/middle/bottom2、间距问题有空隙解决方案：父元素中设置font-size：0...
块级元素和行内元素有什么区别
05-24
块级元素和行内元素是 HTML 中常见的两种元素类型，它们在显示上有许多不同之处。 1. 块级元素通常会独占一行，而行内元素则会在一行内与其他元素共存。 2. 块级元素可以设置宽度、高度、内边距和外边距等样式属性...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值