关于CSS3中display:inline的易错点

最新推荐文章于 2024-01-04 11:25:48 发布
最新推荐文章于 2024-01-04 11:25:48 发布
阅读量995 收藏 2
点赞数
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21007229/article/details/103543781
版权

我们都知道当display:inline时，
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。

inline元素设置width,height属性无效。
但是对于margin,padding却有一些模糊，我看到过很多人写的博客，大多都是写的:
margin-top,margin-bottom设置无效，margin-left,margin-right可设置；
padding-top,padding-bottom设置无效，padding-left,padding-right可设置

但是，其实这种说法是有错误的，对于inline元素,padding在top,bottom,left,right上的设置都会起作用。
如下图所示：

在这里插入图片描述

JavaFeel
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS display:inline和float:left两者区别探讨
01-19
本文和大家重点讨论一下CSS display:inline和float:left两者的区别，CSS display是指显示状态，inline表示内联，特点是紧贴着前一个内联元素，通常默认的内联元素有span,a,em,strong等。而float表示的是浮动，float:...
关于 display: inline 、block 、inline-block
deadswan000的专栏
09-26 375
block元素的特点是：1N-u4T#@BT BrL0总是在新行上开始；中国经济网 经济博客+N/wl Z0V8z D&_高度，行高以及顶和底边距都可控制；,lrDM!P.A0宽度缺省是它的容器的100%，除非设定一个宽度中国经济网 经济博客MZw#VpU9U, , , , 和是块元素的例子。0vXy:oF rvL0中国经济网 经济博客
display:inline 会导致表格宽度 不好调整
weizhongxing6的专栏
03-04 3482
这篇文章我们将要来讨论css里面的“块元素”和“内联元素”，并举例讲解用不好的时候，会导致哪些问题。 首先，我们来定义一下这两个概念。 块状元素 一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。 内联元素 内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一
当设置display:inline;时li的宽度无效的解决方法
zhaojun_8202的专栏
02-18 1028
若制作导航栏时，使用列表li 的定义时，若想加上一个背景图 ，这时候若定义li的一个属性为:li{display:inline ; width:83px; height:30px;}，则浏览器会无视后面的高和宽属性的定义，按照默认字体大小来显示！ 解决的方法为，将display:inline ,改成 display:block； 和加上float:left; 即可正常，完整的应为：li{...
display属性
weixin_43786904的博客
06-12 802
根据css规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，称为块元素，而span元素的默认display属性值为“inline”，称为“行内”元素。 块元素和行元素是可以转换的，也就是说display的属性值可以由我们来改变。 display常见属性值 none ...
块元素设置inline属性不能设置宽高的解决办法
仗键天下 策码一生
05-22 5507
版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明 http://www.blogbus.com/catller-logs/30679536.html inline为display属性：设置是否及如何显示元素 ---> 此元素会被显示为内联元素，元素前后没有换行符。 在，可以使其在一行中显示。但当这个时候我无法给li限制高度和宽度。给布局上带来很大的不便。 Li，
css display属性：inline、block、inline-block
程序员青戈
03-03 675
css display属性：inline、block、inline-block
详解CSS中的display:flex||inline-flex属性
09-27
主要给大家介绍了CSS中的display:flex和display:inline-flex属性，文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。
CSS属性display:inline-block用法深入理解
09-25
在CSS布局中，`display`属性是一个至关重要的样式规则，用于定义元素的显示方式。`display:inline-block`是其中一...在实际应用中，建议结合其他CSS3布局技术，如Flexbox或Grid，以获得更强大、更一致的布局解决方案。
CSS的display属性
荷塘月色
11-17 606
我之前想取消几个div之间的换行，于是为其设置了display：inline，然后发现，虽然实现了不换行，但是好像设置的宽高失效了!!!! 然后去百度之后我才知道是怎么回事，备份一下，防止忘记。
CSS学习笔记（八）CSS 布局 - display 属性，width 和 max-width，溢出，浮动和清除
qq_43625134的博客
05-17 1527
CSS 布局 - display 属性 display 属性是用于控制布局的最重要的 CSS 属性。 display 属性 display 属性规定是否/如何显示元素。 每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。 块级元素（block element） 块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。 块级元素的一些例子： <div> <h1> - &lt
width属性在内联元素内不起作用
葡萄
09-07 1340
内联元素是不支持width的，只有块级元素支持。所以可以使用display属性将元素进行块化。 display：block； display：inline-block;
比float更好的页面布局inline-block
weixin_33885253的博客
09-13 175
一：页面布局的发展过程 桌格设计 表格+css div+css的浮动布局 div+css的内联块布局 二：流行多年的浮动布局的优劣 优势： div+css浮动布局的优势，主要是相对于table布局来说的。主要表现为下面几个方面： 1，更快的网页呈现速度； 2，更佳的后台编程支持度； 3。更好的搜索引擎友好性。 4。更优的网页改动重构性。 ...
当设置display:inline；时，盒模型的宽度样式失效的解决办法
最新发布
galaxyJING的博客
01-04 452
把display: inline 删了 换成float: left;}后，发现宽度就失效了，但是有需要盒子不换行。当给一个盒子的样式加了。
css before,after伪元素width,height属性不生效解决
路过君的博客
10-25 5939
原因 before、after伪元素存在默认样式 { display: inline; } 解决 修改样式如下即可生效 xxx::before { display: inline-block; width: 16px; height: 16px; }
可以设置inline元素的padding和margin吗？
fydxx的博客
03-06 3986
对于这个问题，我的第一感觉就是不能，后来查看资料才知道原来我把inline元素设置了width和height无效和题目搞混了，经过查资料和实际验证后，得出以下结论：    1. inline元素设置width，height属性无效    2.inline元素的padding和margin可以设置，但是水平方向的padding-right，padding-left，margin-right，marg...
CSS display 属性详解
huajiongni9676的博客
12-06 1139
display的所有属性 {/* CSS 1 */ display: none; display: inline; display: block; display: list-item; /* CSS 2.1 */ display: inline-block; display: table; display: inline-table; display: table-cell; display:
html页面元素慢慢显示效果,关于html元素的 width属性无效果的解决方法
weixin_30679293的博客
06-03 602
关于html元素的 width属性无效果的解决方法发布时间：2009-10-15 12:42:59 作者：佚名 我要评论1.关于元素的 width属性无效果先运行下程序看下:[html]123 [/html]可以看到 span会自动根据包含的内容来变化宽度这是因为:对于内联元素(可以是默认即为内联的比如 span 元素，也可以是1.关于元素的 width属性无效果先运行下程序看下:123...
css之display:inline-block布局和浮动布局对比
wordpython
02-23 2206
https://www.cnblogs.com/Ry-yuan/p/6848197.html
css里的display:inline-block
04-02
display:inline-block是一种CSS属性，它允许元素在一行内显示，并保留块级元素的特性。具体来说，该属性会将元素视为内联元素，但又具有块级元素的属性，例如可以设置宽度、高度、内外边距等。 使用display:inline-block可以使元素在一行内显示，而不会像display:block一样占据整行。同时，还可以设置元素的宽度、高度、内外边距等属性，使其具有块级元素的表现形式。通常用于创建水平菜单、图文混排等场景。 需要注意的是，display:inline-block会在元素之间留下空格，这些空格也会被显示出来。可以通过在父元素中设置font-size:0和在子元素中设置font-size:16px（或其他合适的字体大小）来解决这个问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值