display:inline-block

最新推荐文章于 2023-07-06 09:54:15 发布
最新推荐文章于 2023-07-06 09:54:15 发布
阅读量295 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 网站前段 文章标签： CSS inline-block
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/onlyoneLIJINGYI/article/details/88757318
本文介绍了内联元素、块级元素的区别及内联-块级元素inline-block的应用场景。inline-block能够实现元素在同一行显示的同时控制高度和宽度，适用于需要布局灵活且控制精确的情况。

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

内联元素：不换行，不能指定大小，即无法设置元素的宽高和margin等。
块级元素能指定大小设置宽高和margin，而且会换行。
有时候，需要元素处于同一行，同时还能指定大小，这个时候，就需要用到内联-块级 inline-block。
inline-block：是使元素以块级元素的形式呈现在行内。意思就是说，让这个元素显示在同一行不换行，但是又可以控制高度和宽度，这相当于内敛元素的增强。
从how2j网站学习搬运过来的，方便自己理解，做个学习笔记。
display章节地址：
http://how2j.cn/k/css2/css2-display/767.html?p=79017
示例如下：
在这里插入图片描述

CSS之使用display:inline-block来布局
weixin_30698527的博客
05-13 1万+
css之display:inline-block布局 1.解释一下display的几个常用的属性值，inline ， block， inline-block inline（行内元素）: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding上下左右都有效，margi...
display: inline-block
xm2by的博客
06-22 897
display: inline-block <div class="container"> <div class="item"></div> <div class=
[转]css中display:inline-block
weixin_30922589的博客
08-04 255
很多时候我们必须使一些块元素并排显示，一般想到的是必须使用浮动，但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG，所以很多时候不得不把这个块元素套在一个内联元素里面，然后给内联元素浮动和边距。今天看到了怿飞、秦歌和乌龙茶关于display:inline-block的文章，很不错，综合一下，记录下来。display:inline-block简单来说就是将对象呈递为内联对象，但是对...
display:inline-block属性
梅的css和js窝
04-02 1219
 在使用CSS实现表现的时候，会对这一属性感觉很迷惑和模糊。display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所有浏览器都识别。支持的浏览器有：Opera、Safari但很遗憾，最流行的IE和Firefox却不支持这个属性（据说下一版本的Firefox将会支持display:inli
display:inline inline-block block
zzzley的博客
11-24 1024
display：block，inline，inline-block
CSS属性display:inline-block用法深入理解
09-25
`display:inline-block`是其中一种特殊的值，它结合了`inline`和`block`两种显示特性的优点，使得元素既能像内联元素一样并排显示，又能像块级元素一样控制内容的宽度和高度。下面我们将深入探讨`display:inline-...
display:inline-block的使用示例
09-25
在网页布局设计中，`display:inline-block` 是一个非常实用的CSS属性，它允许元素以行内元素的方式显示，但同时保留着块级元素的特性，如设置宽度、高度以及垂直对齐等。这个属性在处理多列布局，尤其是需要在有限的...
display:inline-block的原理分析
09-25
`display:inline-block` 是 CSS 中的一个重要属性，用于控制元素的布局方式。这个属性结合了 `display:inline` 和 `display:block` 的特性，使得元素既能像内联元素一样在一行内排列，又能像块级元素一样拥有宽度、...
display:inline、block、inline-block
xyjikl
07-17 566
总体概念 block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。大体来说HTML元素各有其自身的布局级别（block元素还是inlin
CSS display: inline-block；
qq_41045651的博客
07-06 9845
这意味着元素会在一行上显示，并且可以设置宽度、高度、内外边距等属性，同时仍保留内联元素的特性，可以与其他元素在同一行内显示。是一种常用的 CSS 属性，用于将元素以内联块级元素的方式显示，使其具备块级元素的特性，并在一行内与其他元素共享空间。元素可以在一行内显示，并且可以与其他元素共享一行，适用于需要结合文本或其他内联元素进行布局的情况。元素不会独占一行，而是根据其内容的宽度来决定自身的宽度，可以在一行内与其他元素并排显示。元素可以设置宽度、高度以及内外边距等属性，使其具备块级元素的特性。
display:inline-block; 到底是什么
猫叔的php之路
11-19 2万+
display:inline; 内联元素，简单来说就是在同一行显示。 display:block; 块级元素，简单来说就是就是有换行，会换到第二行。 display:inline-block; 就是在同一行内的块级元素。 说概念太模糊，来个真实案例吧。 链接一</a>链接一</a> A默认就是一行，所以inline用在这里是废的。宽高度设置也是费的。 链接一
CSS 布局 - display: inline-block
qq_40937487的博客
04-10 190
display: inline-block 与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。 同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。 与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边。 链接：https://www.w3school.c
css中display:inline-block
taotoxht的专栏
10-24 636
很多时候我们必须使一些块元素并排显示，一般想到的是必须使用浮动，但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG，所以很多时候不得不把这个块元素套在一个内联元素里面，然后给内联元素浮动和边距。今天看到了怿飞、秦歌和乌龙茶关于display:inline-block的文章，很不错，综合一下，记录下来。 display:inline-block 简单来说就是将对象呈递为内联对象，
CSS中的 display：inline-block
CyberPlayer的博客
02-14 2865
display: inline-block 　　与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。 　　与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边 　　display 的一种常见用法：
浅谈display：inline-block
热门推荐
bigboom_的博客
04-23 2万+
css之display:inline-block布局 先写几个常用的display布局方法 1.display：none 用来在不删除元素的情况下隐藏或显示元素。 它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。 2.display：block 块级元素 通常可以用来搭配display：none来实现元素的显示或隐藏，也可以作为块级元素来使用，使元素独占一行 3.displ
display:inline-block布局
peppa_pig的博客
01-18 308
所有的主流浏览器都支持display属性，它规定了元素应该生成的框的类型。 display几个常用的属性值：inline，block，inline-block inline（行内元素）: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.  不能更改元素的height，width的值，大小由内容撑开.  可以使用padding上下左右都有效，ma...
详解CSS display:inline-block的应用
weixin_30270889的博客
11-01 2381
本文详细描述了display:inline-block的基础知识，产生的问题和解决方法以及其常见的应用场景，加深了对inline-block应用的进一步理解。 基础知识 display:inline-block是什么呢？相信大家对这个属性并不陌生，根据名字inline-block我们就可以大概猜出它是结合了inline和block两者的特性于一身，简单的说：设置了inline-block属性的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值