inline-block和inline的区别

最新推荐文章于 2024-03-21 15:00:00 发布
转载 最新推荐文章于 2024-03-21 15:00:00 发布 · 363 阅读 · 0
文章标签：

#html

本文探讨了HTML中display属性设置为inline与inline-block时元素的行为差异。特别关注当定义宽度和高度后，inline-block元素如何表现出不同于inline元素的特性，如可能导致的内容溢出现象。

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


html

使用display的inline-block和inline的区别，没有加宽度和高度时，没有区别。加了宽度和高度，inline-block就会溢出。



 效果



inline-block和block的区别
gao_zhennan的博客
02-24 6081
一、块级元素和内联（行内）元素的特点 块级元素 1. 独占一行 2. 可以设置属性：width、height、margin-top和margin-bottom 内联元素 1. 多个元素在一行显示
block，inline和inline-block概念和区别
lihei12345的专栏
07-13 1472
[转]  总体概念 block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。大体来说HTML元素各有其自身的布局级别（
inline和inline-block有什么区别？
最新发布
alive_new的博客
03-21 1276
inline 元素是内联元素，水平排列，不会独占一行，不可以设置宽度和高度。inline-block 元素是内联块级元素，水平排列，可以设置宽度和高度，可以在一行中排列，也可以在多行中换行。使用 inline 适合不需要设置宽度和高度，只需水平排列的元素。使用 inline-block 适合需要控制宽度和高度，同时水平排列的元素，以及在一行中排列多个元素或需要换行的场景。
inline和inline-block的区别
qq_33960741的博客
01-22 977
inline-block才具有可以设置的高度 inline不具有高度，即使设置height和line-height也不会生效
display:inline-block，block，inline的区别与用法
weixin_30608503的博客
06-01 246
一、首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行，其后多个block元素自动换行、 可以设置width，height，设置了width后同样也占领一行、同样也可以设置 margin与padding属性。 ps:常见的块级元素:div,img,ul,form,p等 行级元素 与其他元素在同一行上，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以...
Firefox Bug: inline/inline-block的间隙采用代码缩进可解决
09-25
在网页布局中，`inline-block` 是一种常用的CSS布局方式，它允许元素保持内联特性的同时，具有块级元素的宽度和高度可调整性。然而，`inline-block` 在不同浏览器间存在兼容性问题，特别是在Firefox中有一个知名的...
关于css display: inline block inline-block的区别分析
01-21
display:inline-block 将...不过 Firefox 下却有私有属性 -moz-inline-box 和inline-block 形似，为什么是“形似”而不是“神似”呢？这是因为使用 -moz-inline-box 会带来很多意想不到的后遗症，比如使用这一属性后，
CSS属性display:inline-block用法深入理解
09-25
`display:inline-block`是其中一种特殊的值，它结合了`inline`和`block`两种显示特性的优点，使得元素既能像内联元素一样并排显示，又能像块级元素一样控制内容的宽度和高度。下面我们将深入探讨`display:inline-...
inline-block带来的元素间距问题解决
09-24
本文主要关注`inline-block`元素的间距问题及其解决方案，同时也会对比`block`和`inline`的特性。 首先，`display: inline-block` 是一种混合型布局模式，它结合了`inline`元素的并排显示特性与`block`元素的宽高...
CSS中的inline和inline-block
DDD_QQQ的博客
10-22 484
inline只是让当前的元素变成行内元素，但是对元素中包含的的块级元素无效，元素包含中的块级元素还是另起一行显示的。元素外的行内元素无法和元素内的块级元素在一行中显示。 inline-block让当前元素，包含元素中的块级元素，一起成为了行内元素。即便元素包含中的块级元素在这个行内元素中的显示还是另起一行的，但是对于元素外的行内元素来说可以在一行显示了。 ...
HTML元素分类：inline、inline-block、block
Finit的成长空间
10-16 6756
三者可以互相转化——设置display属性值：`inline、inline-block、block`
block，inline和inline-block详解+案例
Somnus陳的博客
04-21 592
这是继小程序的坑了解而来： 代码+看图会更明确。发现放程序会跳行效果不好，后来加了一张图。   显示：内联 内联元素，简单的说就是具有此性质元素都会在同一行显示，除非这一行排列不下了才会在下一行显示，而且设置的宽度，高度属性都无效。 显示：块 块级元素，简单来说具有此性质的元素会独占一行，此时可以设置称重以及高度属性。 显示：内联块  结合了直列以及块各自的属性，就是在同一...
inline和inline-block区别
qq_44823936的博客
08-26 295
最近在写页面的时候一直纠结这俩属性有什么区别，最后还特意查了下，一样可以在同行显示，但inline-block可以调节高度、宽度。 原文：https://zhidao.baidu.com/question/527108547.html
inline 与inline-block到底有什么区别
qill_qill的博客
06-04 660
之前对inline与inline-block一直感觉比较容易混淆他们之间的特性，特别是在看到这个图的时候，这是对“box2”设置为{display:inline-block;} 那么什么是inline呢，根据字面意思，它是在一条线上的，那么内联就是这些元素是排成一条线的； 那inline-block又是什么呢，在W3SCHOOL里面解释它就是排成线，但表现得像块一样，不过感觉还是很模糊；
inline，inline-block和block的区别是？
LuckXinXin的博客
04-05 243
1）display：block：将元素显示为块级元素，可以设置元素的height//width,padding,border,margin，每一个块级元素都是从新的一行开始 2）display : inline：将元素显示为行内元素，高度、宽度、行高以及margin-top margin-right margin-bottom不可设置，高度就是内容文字或者图片的宽度，不可以改变。多个相邻的行...
block，inline和inline-block的概念以及区别
weixin_45432334的博客
02-25 549
1、block块级元素 block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。 block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。 block元素可以设置margin和padding属性。 2、inline内联元素 inline元素不会独占一行，多个相邻的行内联元素会排列在同一行里，直到一行排列不下...
block，inline和inline-block概念和区别大诠释
dexing07的博客
11-18 747
总体概念 block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。 大体来说HTML元素各有其自身的布局级别（block元素还是inline
inline-block布局挑战与解决策略
文章以一个无序列表（`<ul>`）为例，其中的列表项（`<li>`）被设置为`display: inline-block`，期望实现一种类似弹性表格的布局，每个列表项具有固定的宽度和最小高度，以及一定的边距。在Firefox 3、Safari 3和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值