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

最新推荐文章于 2023-05-18 15:53:55 发布
最新推荐文章于 2023-05-18 15:53:55 发布
阅读量171 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jamey8383/article/details/106033896
版权

inline 的 width 是占用一行最小的空间 (take the smallest amout of space, possible)，系统分配的。同理 block 是占用一行最大的空间，也是系统分配的。

inline-block 类似于 inline 但是可以设置 width 和 height。

inline 和 inline-block 有时显示中间会有gap，那是因为html 写的时候中间有空格或者空行，连在一起写就不会有gap了，如下代码所示。

<body>
        <div class="inline square">#1</div><span class="inline square">#2</span>
</body>

 

jamey8383
关注
专栏目录
display:inline-block的原理分析
09-25
这个属性结合了 `display:inline` 和 `display:block` 的特性，使得元素既能像内联元素一样在一行内排列，又能像块级元素一样拥有宽度、高度以及垂直方向的 margin 和 padding。这对于创建复杂的网页布局和响应式...
display:inline-block的使用示例
09-25
总结来说，`display:inline-block`是解决浮动元素换行问题的有效方法，配合`white-space:nowrap`和`font-size:0`可以实现紧密排列的多列布局。这种布局技术在网页设计中有着广泛的应用，尤其是在创建响应式布局和...
display:inline 和display:inline-block和display:block的区别
weixin_34121282的博客
11-21 113
之前讲过块级元素使用display：block 行内元素使用display:inline 那么今天我们就来区分一下display:inline，display:inline-block和display:block的区别 首先先说一个名词 :inline element：行内元素也叫作内联元素，内嵌元素，直进式元素 bl...
display：inline和display：inline-block有什么区别？
xfxf996的博客
04-21 1320
CSS display的inline inline-block和inline-block值之间究竟有什么区别？
jquery根据select的value设置默认选中项
weixin_34221073的博客
08-09 5102
根据数据库信息设置默认颜色 ，${bean.color}是后台传过来的value值；color对应的是select的id jquery代码如下： $("#color option[value=${bean.color}]").attr("selected", "selected"); select代码： <select name="color" id="color" style="width...
display: block ，display：inline 和display：inline-block 区别
seimeii的博客
05-18 239
display: block ，display：inline 和display：inline-block 区别
display:block；和display:inline；display:inline-block的区别
Menqq的博客
01-27 339
display:block 将元素显示为块级元素。 block元素的特点是： 总是在新行上开始； 处于常规流中，width没有设置会自动填满父容器 高度没有设置的情况下，会被处于常规流中的子元素撑开 高度，行高以及顶和底边距都可控制； margin，pading生效 vertical-align无效 宽度缺省是它的容器的100%，除非设定一个宽度<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。
CSS属性display:inline-block用法深入理解
09-25
`display:inline-block`是其中一种特殊的值，它结合了`inline`和`block`两种显示特性的优点，使得元素既能像内联元素一样并排显示，又能像块级元素一样控制内容的宽度和高度。下面我们将深入探讨`display:inline-...
HTML行内元素和块级元素的区别
zbb202013030229的博客
12-13 2371
　HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。 一，行内元素与块级元素的区别： 1.行内元素与块级元素直观上的区别二、行内元素与块级元素的三个区别 行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。 块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。 2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它...
IE6的inline-block
12-13
1、display:inline-block 让一个元素具有“区块元素”的属性（可以设置width和height），又具有“内联元素”的属性（不产生换行）。 2、IE中的inline-block IE6不支持这个属性，但IE8开始支持这个属性。 让IE6内联元素具备inline-block特性 由于inline-block会触发IE的layout，所以IE6中只要设置{display:inline-block;}即可。 让IE6区块元素具备inline-block属性，有两种方法 A、可以先触发layout，再设置为inline，需要注意的是这两个display必须在两个CSS声明
CSS中display属性：block、inline和inline-block的区别
热门推荐
aty
02-28 1万+
设置span的高度和宽度无效,span的margin和padding无效
HTML元素的display: inline、block和inline-block
MeYeah!的博客
10-14 1807
display:inline： 使元素变成行内元素（内联），拥有行内元素的特性，即 与其他行内元素共享一行； 不能修改width、height属性，大小由内容撑开； padding属性 top、right、bottom、left设置都有效；margin属性只有left、right设置有效; 常见的有：<span> <a> <strong> <em>...
display属性值block，inline和inline-block概念和区别
javaloveiphone的专栏
03-18 4943
一、总体概念1、block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。2、大体来说HTML元素各有其自身的布局级别（block元素还是inli
block inline 和 inline-block
weixin_30252155的博客
07-03 75
概念 block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。 block元素通常被现实为独立的一块，会占据一整行的空间；而inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。 常见的block-level elements (块...
关于display属性block、inline、inline-block的联系与区别
leejj_520的博客
02-23 1685
display 属性规定元素应该生成的框的类型，这个属性用于定义建立布局时元素生成的显示框类型。 首先来解释一下这三者分别是什么含义： display：block  此元素将显示为块级元素，此元素前后会带有换行符。 display：inline  默认值，此元素会被显示为内联元素，元素前后没有换行符。 display：inline-block  行内块元素（CSS2.1 新增的值），意
block、inline和inline-block
每个人为不同的理由带着面具说谎，动机也只有一种名字那 叫做欲望
01-07 1万+
block、inline、inline-block行内元素和块级元素blockinlineinline-block行内元素和块级元素的区别常见用法 行内元素：又叫内联元素， 块级元素：是一个元素，占用了全部宽度，在前后都是换行符
CSS（五）---CSS标签三种模式：display: block、inline、inline-block
Twelve_Y的博客
04-26 485
CSS标签三种模式 标签显示模式：display：模式； 1. 三种显示模式： 块级标签（block）、行内元素（inline）、行内块元素（inline-block） 2.块级标签：block 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等 其中<div>...
CSS基础知识学习：block，inline和inline-block
weixin_34254823的博客
09-22 133
为什么80%的码农都做不了架构师？>>> ...
display: block和display: inline-block;区别
最新发布
06-03
display: block将元素呈现为块级元素，会在前后添加额外的空间，使其独占一行或多行。而display: inline-block将元素呈现为内联块级元素，不会独占一行，但是可以设置宽高等块级元素的属性。inline-block的元素排列会受到空格、换行符等文本节点的影响，而block不会。通常来说，使用display: block的元素用于布局或显示一整块内容，而使用display: inline-block的元素用于布局或显示一部分内容并允许其他内容在同一行内显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值