开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

DIV在使用内联块后下降[复制]

在使用DIV并设置为内联块（inline-block）时，可能会遇到元素下降（位置偏移）的问题。这种情况通常是由于浏览器默认的空白处理和基线对齐导致的。

基础概念

内联块（inline-block）：一种CSS布局模式，元素既具有内联元素的特性（如可以与其他内联元素在同一行显示），又具有块级元素的特性（如可以设置宽高）。
基线对齐：文本的基线对齐会影响内联块元素的位置。

问题原因

空白间隙：HTML中的空格、换行符等会被浏览器解析为一个空白字符，导致内联块元素之间出现间隙。
基线对齐：内联块元素的基线对齐可能导致元素位置偏移。

解决方法

消除空白间隙：
- 将HTML代码中的空格和换行符去掉。
- 使用负margin来抵消空白间隙。
- 使用负margin来抵消空白间隙。
- 使用负margin来抵消空白间隙。

设置垂直对齐方式：
- 使用vertical-align属性来调整内联块元素的垂直对齐方式。
- 使用vertical-align属性来调整内联块元素的垂直对齐方式。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline-block Example</title>
    <style>
        .inline-block {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin-right: -4px; /* 消除空白间隙 */
            vertical-align: top; /* 垂直对齐 */
        }
    </style>
</head>
<body>
    <div class="inline-block">Element 1</div><div class="inline-block">Element 2</div>
</body>
</html>

参考链接

通过以上方法，可以有效解决DIV在使用内联块后下降的问题。

相关搜索:在内联块的div上使用z索引使用div元素交替使用块和内联行为？使用CSS在内联块元素后强制换行在Microsoft Edge中使用内联块显示问题两个div并排-已经尝试使用浮动和显示:内联块；如何使用内联块属性将文本放置在背景图像下方如何使用媒体查询使div在特定屏幕中内联在react中的组件内的2个元素上使用内联块在使用panzoom时，如何在内联块容器中将图像初始居中？在某一行(内联-块)无序列表后插入一个分隔符 Hugo:在不使用内联HTML的情况下向文本块添加样式使用jquery clone语句复制div标记，在处理新复制的div时，js做得不正确为什么边距会影响我的内联块div是否会使用flex-start与顶部对齐？在平滑滑块旁边添加固定文本(使用内联块或flex使滑块大小混乱)如何在带有块元素的div中使用css在右侧对齐文本有没有办法在DIV块中使用两个样式条件如何使用React使预加载器块在N秒后消失使用Bazel在构建后自动复制可执行文件使用jquery在div中添加输入字段后，在enter上提交表单在HTML5中使用<div>标签创建非独立的块合适吗？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

设计师也能轻松掌握的前端小知识

阅读须知：工具不重要，工具不重要，工具不重要……OK？有人说DW早就淘汰了，我造啊，然后呢？我还打算用小红本（editPlus）讲呢，哈哈哈哈…… 希望乃们接受我这种循序渐进的过程。做算术题你会知道“乘法”和“设未知数”来得更快，但是也得从简单“加减法”过渡。如果有疑问请留言或私信，下篇会着重讲。所有内容基于自己的理解和编码习惯，并非标准。好了，进入正题。排版之前先来做点准备工作。一、嵌入、内联样式 1. CSS 嵌入其实程序员是一帮蛮会偷懒的家伙你信么？^_^ 在码字过程中，如果遇到常用的一段代

08

如何把控css的方向感

在介绍完问题学习法之后，进入我们今天的主题，接下来我会介绍css的一些底层的知识和比较诡异的现象，借此来让大家对css有更深入的理解。

01

HTML+CSS高级

第一章一、内联块 display: inline-block; 1、特征： 1.1 块级元素在一行显示（得到内联元素的属性） 1.2 内联元素支持宽高（得到块的属性） 1.3 没有宽度的时候，内容撑开宽度（得到内联元

06

关于p标签不能嵌套div标签引发的标签嵌套问题总结

问题由来：

标签，两个都是块级元素，按理应该可以正常显示，但是最后的结果居然是多出来一段

的效果，所以就在网上找了许多关于标签嵌套规则的资料，下面做一个个人总结。

03

P不能做div的父元素？

是什么原因导致的呢？ W3C这样说：“ 如果你这样做，将会严重违反P的语义 ” 解决方法暂时没有于是我找到了块级元素和内联元素的嵌套规则，如下：

00

P不能包div？

是什么原因导致的呢？ W3C这样说：“ 如果你这样做，将会严重违反P的语义 ” 解决方法暂时没有于是我找到了块级元素和内联元素的嵌套规则，如下：

01

HTML基础-块级元素与内联元素

在网页设计与开发中，HTML作为构建内容的基础，其元素根据显示特性的不同被分为两大类：块级元素（Block-level Elements）和内联元素（Inline Elements）。理解这两者的区别及正确使用它们，对于构建结构清晰、布局合理的网页至关重要。

01

重拾CSS规范之从盒类型谈起

今天要写的不是CSS标准盒模型和IE盒模型，那个烂大街了。今天要深入探讨的是CSS去控制页面布局背后的那一套规则，页面就是由很多个各式各样的盒组成的，那我们就聊这个。这个是对后面的BFC以及定位模式的一个铺垫，基础很重要！！！

03

换了新公司，Vue开发如何无缝快速切换React技术栈

换了新公司，工作中使用的技术栈也从Vue换到了React，作为一个React新人，经常的总结和思考才能更快更好的了解这个框架。这里分享一下我这两个月来使用React总结的一些性能优化的方法。因为目前公司的项目是全面拥抱hooks的，所以只会涉及function组件写法，不包含class组件写法的相关内容。「注意：本文只涉及到一些业务开发层面的代码优化，很多通用的优化思想，比如虚拟列表，图片懒加载，节流防抖，webpack优化等等内容都不会涉及到。」

01

RenderingNG中关键数据结构及其角色

大家好，我是柒八九。今天这篇文章是Chromium最新「渲染架构」 RenderingNG的译文系列文章的「第二篇」 -- 在RenderingNG渲染过程中关键数据结构和它们所担当的角色。

01

div构建table

1、Css display值与解释-（详细可见CSS手册的CSS display手册）参数： block :块对象的默认值。用该值为对象之后添加新行 none :隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 inline :内联对象的默认值。用该值将从对象中删除行 compact :分配对象为块对象或基于内容之上的内联对象 marker :指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用 inline-table :将表格显示为无前后换行的内联对象或内联容器 list-item :将块对象指定为列表项目。并可以添加可选项目标志 run-in :分配对象为块对象或基于内容之上的内联对象 table :将对象作为块元素级的表格显示 table-caption :将对象作为表格标题显示 table-cell :将对象作为表格单元格显示 table-column :将对象作为表格列显示 table-column-group :将对象作为表格列组显示 table-header-group :将对象作为表格标题组显示 table-footer-group :将对象作为表格脚注组显示 table-row :将对象作为表格行显示 table-row-group :将对象作为表格行组显示

03

css样式—字体垂直、水平居中

.tt{ padding: 0px; width:500px; height

div构建table

1、Css display值与解释-（详细可见CSS手册的CSS display手册）参数： block :块对象的默认值。用该值为对象之后添加新行 none :隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 inline :内联对象的默认值。用该值将从对象中删除行 compact :分配对象为块对象或基于内容之上的内联对象 marker :指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用 inline-table :将表格显示为无前后换行的内联对象或内联容器 list-item :将块对象指定为列表项目。并可以添加可选项目标志 run-in :分配对象为块对象或基于内容之上的内联对象 table :将对象作为块元素级的表格显示 table-caption :将对象作为表格标题显示 table-cell :将对象作为表格单元格显示 table-column :将对象作为表格列显示 table-column-group :将对象作为表格列组显示 table-header-group :将对象作为表格标题组显示 table-footer-group :将对象作为表格脚注组显示 table-row :将对象作为表格行显示 table-row-group :将对象作为表格行组显示

02

系统讲解CSS应用

<input type="radio" name="radio1" id="radio1-2" /> <label for="radio1-2">选项二</label> //关联的关键是ID

01

CSS

常见的块元素有：ul列表、form表单、h1-h6标题、hr水平线、p段落、div

02

display:inline、block、inline-block的区别

http://www.cnblogs.com/jdonson/archive/2011/06/10/2077932.html

01

全栈之前端 | 4.CSS3基础知识之盒子模型学习

描述：在 HTML 中首先会使用 CSS 来对元素进行定位，我们将学习如何使用 CSS 来控制和定位网页元素的位置、大小和布局。

02

block，inline,inline-block的区别

block: 英语翻译过来是“块”意思，就跟小时候玩过的积木方块一样，一块一块往上搭。 inline: 英语翻译过来就是“内联”的意思，内联不好理解，我的理解就是行内元素； block和inline都是比较通俗的说法，block应该是“block-level elments”(块级元素)，inline应该是“inline elements”（行内元素）细节对比： display:block的元素; 　　1、在网页中会单独占一行，默认情况下他的宽度是填满父级宽度，即使他的宽度比浏览器窗口小很多也不会让后面的

08

第八十四节，css布局小技巧及font-awesome图标使用

font-awesome图标是一个css的插件包，是一个以字体文件方式集成的图标，首先要下载插件包

02

【云+社区年度征文】2020一网打尽CSS世界

一个水平流上只能单独显示一个元素，因此理论上都可以配合clear属性来清除浮动带来的影响。

01

HTML标签分类

HTML有N多标签，根据显示的类型，主要可以分为3大类块级标签：独占一行的标签能随时设置宽度和高度（比如div、p、h1、h2、ul、li） <style> div{ background-color: red; width: 200px; height: 50px; } p{ background-color: yellow;

09

无意义”的标签div和span的区别

HTML只是赋予内容的手段，大部分HTML标签都有其意义（例如，标签p创建段落，h1标签创建标题等等）的，然而div和span标签似乎没有任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。但实际上，与CSS结合起来后，它们被用得十分广泛。你所需要记住的是span和div是“无意义”的标签。它们的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用它们被用来组合成一大块的HTML代码并赋予一定的信息，大部分用类属性class和标识属性id与元素联系起来。span和div的不同之处在于span是内联

01

前端基础篇之CSS世界

我想你每天写css代码有时候也会觉得很痛苦：这个布局的css怎么这么难实现！我也经常会有这种感觉，一个看似简单的布局总是要琢磨半天才能实现，偶尔还会出现一些怪异的超出理解的现象。这是因为我们对css只是大概知道个形，并没有看透css的本质。在同事的推荐下我阅读了张鑫旭老师的《css世界》，才发现css跟想象中的不太一样。本文为《css世界》个人总结笔记，为缩减篇幅丢弃了张老师冗余的小幽默，丢掉了些含金量较低的章节内容，因为ie已经被淘汰出局，所以有关css兼容性的地方也全部忽略不记，同时对个人觉得不易理解的地方加上了一些自己的理解和验证，所以错误之处还望指正。顺便推荐个好用的在线代码编辑工具，国内镜像站点，方便各位对本文实例进行测试。另外本文会随着作者对css的更深入理解而逐步更新，希望到最后能够文如标题展现出真正的css世界。

05

web前端基础

代码示例：跳转到https://www.acai.cloud地址时用浏览器空白标签页打开

00

CSS基础知识

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

03

<干货>5分钟快速回顾HTML CSS

一.html (一)标签类型 1.块元素(独占一行!即使通过css设置宽度width,也会占一行的位置) div(无语义) 列表 ur/ol/li 段落 p 标题 h1-h6 自定义列表 dl/dt/dd 其它常见问题块元素的居中问题块级元素左右居中:先设置自身width;然后,margin: 0 auto; 2.内联元素(行内)[不支持width, height, margin上下,padding上下] 常用内联元素 span(无语义) 超链接标签 a src可

09

CSS十问之元素居中

大家好，我是柒八九。从今天起，我们又重新开辟了一个新的领域：CSS串讲。(毕竟在Web 领域，CSS也是有举足轻重的作用)在该系列文章中，我们会一起学习「元素居中」、「层叠上下文」还有一些在面试中比较常见的问题及一些在工作中遇到比较好玩的点。

01

CSS 块元素、内联元素、内联块元素

元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。

02

前端基础-JavaScript综合案例

insertBefore、firstChild、getComputedStyle、appendChild、createElement、Math.random、Math.floor

02

HTML
和

元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

01

CSS

repeat-x x轴平铺 repeat-y y轴平铺

01

第153天：关于HTML标签嵌套的问题详解

div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul……

02

《CSS 世界》读书笔记-流与宽高

1. 前言在学习 CSS 的过程中，我经常会被数不清的属性和特性弄得晕头转向。作为前端新手，经常会坐在显示器前花很多很多时间去 “追” 视觉稿，也经常会在 “为什么这个属性不生效” 和 “为什么这个属性生效了但是不是我想要的效果” 之间摇摆，直到我开始看张鑫旭老师的《CSS 世界》，才开始渐渐地走进 CSS 世界，才明白原来 CSS 的背后也是有一套 “物理” 和 “魔法” 法则。遵循着法则，很多问题也许会迎刃而解。因为在阅读本书 CSS 的 “流” 相关内容时让我有了一种恍然大悟的感觉，所以才有了此篇

02

【Java 进阶篇】HTML块级元素详解

HTML（Hypertext Markup Language）是用于创建网页的标记语言。在HTML中，元素被分为块级元素和内联元素两种主要类型。块级元素通常用于构建网页的结构，而内联元素则嵌套在块级元素内，用于添加文本和其他内容。本文将重点介绍HTML的块级元素，包括其定义、常见块级元素和示例代码。

04

React 设计模式 0x4：样式

在每个 Web 应用程序中，样式化非常重要，因为样式使其对用户非常有吸引力，并为用户提供良好的体验。在 React 中有不同的方法来实现这一点。

02

【动画进阶】单标签下多色块随机文字随机颜色动画

在 CSS 还原拉斯维加斯球数字动画 - 掘金一文中，我们利用纯 CSS，实现了一个非常 Amazing 的动画效果：

05

说说各种居中

1.毫无疑问，绝对定位居中是本人最喜欢、使用次数最多的居中方式。通过设定position为absolute，将使div脱离文档流，left、top、right、bottom设置为0，使目标盒填充其父元素的所有可用空间，父元素一般为body，或者position设置为relative的容器。设置高度或宽度后，margin： auto会促使该块在水平方向和垂直方向居中。

02

VUE 四个常用选项

过滤就是一个数据经过了这个过滤之后出来另一样东西，可以从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。例如，从[‘abc’,‘abd’,‘ade’]数组中取得包含‘ab’的值，那么可通过过滤器筛选出来‘abc’和‘abd’；把‘Hello’变成‘Hello World’，那么可用过滤器给值‘Hello’后面添加上‘ World’；或者把时间节点改为时间戳等等都可以使用过滤器。

03

CSS样式更改——裁剪、Z-Index、清除、改变元素的特性

上篇文章主要介绍了CSS样式更改篇中的框模型、定位、浮动、溢出基础知识，这篇文章主要分享CSS样式更改中的裁剪、Z-Index、清除、改变元素的特性基础知识，一起来看看吧。

02

python_day12_html

内联标签：<input>_^<textarea>

02

html+css学习笔记003-样式初始化

Author：Mr.柳上原付出不亚于任何的努力愿我们所有的努力，都不会被生活辜负不忘初心，方得始终记得大学毕业后的第一份工作在一家在厦门还算比较知名的互联网公司做电话销售总监交给我们的第一堂课做人要低调，做事要高调如今走过些许岁月，回头想想此话如同金玉良言，醍醐灌顶如果以前的自己能早点领悟这句话或许会是另一番风景吧 <!DOCTYPE html> <html lang='en'> <he

03

CSS的优先级

CSS 中的优先级也叫做特异性，浏览器使用它来判断在元素上使用何种属性，优先级是基于不同的选择器组合而成的匹配规则。

01

JS引擎(1):JS引擎擂台赛，JavaScript引擎的特征比较及术语科普

上篇介绍过JavaScript引擎的历史，《JS引擎(0):起底各种JavaScript引擎群雄争霸之路》

02

一文剖析HTML块和内联元素以及DIV容器，运维开发必备前端技能，基本功强化训练。

在html中，都有哪些块级元素呢？笔者来给大家汇总一下，以下是HTML中所有的块级元素：

01

css学习--css基础

学习慕课网笔记，课程：http://www.imooc.com/code/2024 1.css选择器子选择器：parent>child 子选择器是指选择parent的范围内的第一个子元素。这里parent和child均是伪代码。可以是class用.classname，也可以是标签ul>li,也可以是id #pid>#cid 后代选择器：parent child 后代选择器是指：选择parent范围内的所欲child元素。与子选择器不同的是，这里包含嵌套内的child元素，而子选择器仅仅选中parent

不定宽高div水平垂直居中(兼容ie6)

不定宽高div水平垂直居中解决方法有很多，JS是最能够确保各种浏览器中一致性的，但是仍然可以使用CSS的方式来解决。

04

SpringBoot前端 —— thymeleaf 简单理解

4、在resoures文件夹下分别创建templates（主要放html文件）和static（主要放css、js文件）文件夹 5、在application.yml配置thymeleaf（这样配置后，在代码中返回到那个页面就不用写过多的前缀和后缀了，达到简化效果）

02

display:inline-block的深入理解 BY blank

在使用CSS实现表现的时候，会经常接触到display:inline-block这一属性，无论是初接触Web标准还是接触标准已久的朋友，大都会对这一属性感觉很迷惑和模糊。 display:inline

09

HTML块级元素和行内元素

块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。常见的块元素有

~
、
、
、
、
、
等，其中
标签是最典型的块元素。块级元素的特点：（1）总是从新行开始（2）高度，行高、外边距以及内边距都可以控制。（3）宽度默认是容器的100% （4）可以容纳内联元素和其他块元素。行内元素(inline-level) 行内元素（内联元素）不占有独立的区域，仅
06

Using SVG

SVG是一种向量图的图片格式，即可伸缩向量图（Scalable Vector Graphics），可以在Adobe Illustrator里面生成。在Web中使用SVG很简单，但是也有一些需要知道的事情。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭