CSS中的inline和inline-block

最新推荐文章于 2025-09-07 13:33:34 发布
原创 最新推荐文章于 2025-09-07 13:33:34 发布 · 507 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨了CSS中inline与inline-block的区别。inline仅使元素变为行内，但不影响内部块级元素的换行显示；inline-block则使元素及其内部块级元素成为行内元素，允许外部行内元素在同一行显示，通过调整内部元素的position属性可实现对齐。

inline只是让当前的元素变成行内元素，但是对元素中包含的的块级元素无效，元素包含中的块级元素还是另起一行显示的。元素外的行内元素无法和元素内的块级元素在一行中显示。

inline-block让当前元素，包含元素中的块级元素，一起成为了行内元素。即便元素包含中的块级元素在这个行内元素中的显示还是另起一行的，但是对于元素外的行内元素来说可以在一行显示了，不过对齐的是元素内的最后一行，像图片在文字中显示一样。想要与首行对齐可以将首行以外的元素的position设置成absolute，这样首行以外的元素就脱离文档流了，元素外的行内元素就可以和首行对齐了

CSS中的`inline`是什么意思？
CodeVorter的博客
09-29 675
块级元素会独占一行，并且会在前后创建额外的空白空间，而内联元素则会在同一行上显示，并且不会破坏文本流。属性用于将元素的显示方式设置为内联，使其在同一行上显示，并且不会破坏文本流。属性，我们可以控制元素的显示方式，使其在同一行上显示，并且不会打破文本流。在编程中，CSS（层叠样式表）是一种用于描述网页或应用程序的外观和样式的语言。类，因此它将以内联方式显示，并且具有黄色的背景和一些内边距。没有应用任何特殊的样式，因此它将以默认的块级方式显示。是CSS中的一个常用属性值，用于控制元素的显示方式。
关于css display: inline block inline-block的区别分析
01-21
display:inline-block 将...不过 Firefox 下却有私有属性 -moz-inline-box 和inline-block 形似，为什么是“形似”而不是“神似”呢？这是因为使用 -moz-inline-box 会带来很多意想不到的后遗症，比如使用这一属性后，
CSS的inline、block与inline-block
weixin_34191845的博客
06-06 340
基本知识点 行内元素一般是内容的容器，而块级元素一般是其他容器的容器，行内元素适合显示具体内容，而块级元素适合做布局。 块级元素(block)：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。 行内元素(inline)：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高。 行内块元素(...
CSS之inline和inline-block
weixin_30902251的博客
09-28 260
inline-block 控制台-代码： PS：inline-block是让元素以内联形式存在，也就是不是块级，但是表现起来(又具有块级元素的高度)--也就是可以调高度(margin或者padding,height) 二· 如果是inline的话，也就是内联，inline是只有水平的宽度可以调的，没有高度，任何的属性调高度都无效 三。如果不用上述两个的话,d...
CSS display属性详解：inline、block与inline-block对比
最新发布
weixin_35982453的博客
09-07 1299
inline适合用于文本或行内内容的样式控制。block是构建网页结构的主力，适合用于容器、标题、段落等大块元素。则是两者之间的桥梁，既能横向排列，又能控制尺寸，适合用于按钮组、导航栏、图标等需要灵活控制的布局场景。通过掌握这三种 display 类型的行为差异与适用场景，开发者可以更高效地进行网页布局设计，为后续更高级的布局技巧（如 flex、grid）打下坚实基础。显示类型典型用途是否可设置宽高是否独占一行排列方式inline文本样式、链接、图标。
CSS的inline、inline-block
找到Web
08-15 553
CSS inline、inline-block 本文将介绍内联布局中，内容的布局方式及相关原理。 inline box 与 line box 对于行框、内联框，标准文档中有个很经典的图。 附上自己的一段代码，方便理解。 <div style="width: 200px; margin: auto;"> 这是一段代码，又长又好看的代码。 <span style="color: red">这是inline box</span> 这又是一段代码，又长又好看的代码。 &l
block、inline和inline-block
热门推荐
每个人为不同的理由带着面具说谎，动机也只有一种名字那 叫做欲望
01-07 1万+
block、inline、inline-block行内元素和块级元素blockinlineinline-block行内元素和块级元素的区别常见用法 行内元素：又叫内联元素， 块级元素：是一个元素，占用了全部宽度，在前后都是换行符
css之display属性之inline-block布局实现详解
11-21
需要注意的是，`display: inline-block`在Internet Explorer 6和7中不被支持，需要使用特定的技巧来处理，例如使用`*zoom: 1;`和`display: inline;`的组合，或者利用`inline-table`等其他方法来模拟`inline-block`的...
CSS中使用inline-block来进行居中的示例
01-19
基本方法是使用 display: inline-block, vertical-align: middle样式和伪元素让内容块在容器中居中。我的实现用到了几个在其他地方见不到的新技巧解决了一些问题。 　内容区声明的宽度不能大于容器的100% 减去0.25em...
CSS属性display:inline-block用法深入理解
12-13
在CSS布局中，`display:inline-block`是一个非常重要的属性，它结合了`block`和`inline`两种显示方式的优点，使得元素既能保持内联元素的特性（如同行排列，允许空格），又能拥有块级元素的特性（如设置宽高，垂直居...
css inline元素与inline-block,block元素
allenmu1982的博客
06-20 191
工作原因很少写CSS,结果总结过好多次的东西，用起来的时候我还是忘了，现在打算由有道云笔记彻底转战博客园，貌似跟方便些，有道云记录了那么多笔记，我却很少翻阅..... 一，inline元素 1,内联元素不能包含块元素，它只能包含其他的内联元素 块级元素是不能放在<p>里面的 所谓的不可自由嵌套的元素就是里面只能放内联元素的，它们包括有：标题标记的<h1>、...
inline和inline-block有什么区别？
alive_new的博客
03-21 1398
inline 元素是内联元素，水平排列，不会独占一行，不可以设置宽度和高度。inline-block 元素是内联块级元素，水平排列，可以设置宽度和高度，可以在一行中排列，也可以在多行中换行。使用 inline 适合不需要设置宽度和高度，只需水平排列的元素。使用 inline-block 适合需要控制宽度和高度，同时水平排列的元素，以及在一行中排列多个元素或需要换行的场景。
block，inline和inline-block概念和区别
lihei12345的专栏
07-13 1493
[转]  总体概念 block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。大体来说HTML元素各有其自身的布局级别（
inline和inline-block区别
qq_44823936的博客
08-26 313
最近在写页面的时候一直纠结这俩属性有什么区别，最后还特意查了下，一样可以在同行显示，但inline-block可以调节高度、宽度。 原文：https://zhidao.baidu.com/question/527108547.html
CSS中inline-block和inline的区别
syl2850246的博客
09-01 1040
行内块元素表现其实和行内元素一样，只是其可以设置width和height属性。
inline和inline-block的区别
qq_41240287的博客
05-06 380
https://blog.youkuaiyun.com/kalama/article/details/79057686
CSS基础布局之line、line-block、block布局区别以及flex布局详解
weixin_60414376的博客
02-04 7129
CSS基础布局之line、line-block、block布局区别以及flex布局详解
inline 与inline-block到底有什么区别
qill_qill的博客
06-04 678
之前对inline与inline-block一直感觉比较容易混淆他们之间的特性，特别是在看到这个图的时候，这是对“box2”设置为{display:inline-block;} 那么什么是inline呢，根据字面意思，它是在一条线上的，那么内联就是这些元素是排成一条线的； 那inline-block又是什么呢，在W3SCHOOL里面解释它就是排成线，但表现得像块一样，不过感觉还是很模糊；
CSS中display:inline 和 inline-block的区别
jiaohuizhuang6019的博客
09-13 1200
是两种 CSS 属性值，它们都用于控制元素在水平方向上排列，并与文本流中的其他元素一起显示。它们之间的主要区别在于如何处理元素的宽度和高度以及如何与其他元素排列。更适合需要元素在一行内显示，但又希望具有更精确控制宽度、高度以及上下间距的情况。根据具体的布局需求和设计目标，可以选择使用其中之一。适用于需要元素在一行内显示，并且宽度和高度由内容决定的情况，而。
css中inline-block
05-04
inline-block 是 CSS 中常用的一个 display 属性值，它可以让元素既具有 inline 元素的特性，又具有 block 元素的特性。 具体来说，使用 inline-block 可以让元素： 1. 能够在一行内显示，不会像 block 元素一样占据一整行。 2. 能够设置宽高等尺寸属性，像 block 元素一样可以设置宽高等尺寸属性。 3. 能够设置 margin 和 padding 等边框样式属性，像 block 元素一样可以设置边框样式属性。 4. 能够设置行高和垂直对齐方式，像 inline 元素一样可以设置行高和垂直对齐方式。 需要注意的是，inline-block 元素的排列方式有时会受到空格、换行符等文本节点的影响，可以通过设置父元素的 font-size: 0; 和 word-spacing: -1em; 来解决这个问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值