inline-block的margin设置无效

最新推荐文章于 2022-03-27 14:17:41 发布
最新推荐文章于 2022-03-27 14:17:41 发布
阅读量3.7k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kalinux/article/details/84980372
版权

inline-block元素之间不可以有空格（换行），例如：

<span></span>

<span></span>

<span></span>

设置margin时是无效的，修改成这样就可以了：

<span></span><span></span><span></span>

或者:

<span></span><!--

--><span></span>

即将中间的内容注释掉；

kalinux
关注
基于inline-block进行自适应列表布局
吴小花的博客
04-12 1528
1.block,inline和inlinke-block细节对比 ● display:block a. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。 b. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。 c. block元素可以设置margin和padding属性。 ...
小程序 inline-block
我的博客
05-14 541
环境 微信开发者工具（Stable v1.02.1911180） 涉及场景 在尝试完成第5周作业时的右上角九九乘法表（如下图）时，尝试几次发现只能完成左上角的效果。 后又测试几次，发现可以通过使用如下代码完成，但总觉得有些冗余： <!--pages/ru/ru.wxml--> <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i"> <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:
inline-block对margin:0 auto无效
斜杠青年博客
06-19 754
为什么inline-block元素使用margin：0 auto不起作用 再次提到上面的考点，这7大属性的值加起来必须是元素包含块的宽度，这里我们假设其他属性均为0，那也就是margin-left + width + margin-right = 包含块的宽度。 所以： 对于块级元素，当width固定后，margin就能通过margin = (包含块的宽度 - width )/2获得取值 而对于inline-block元素（包含行内替换元素比如img等），内容的宽度就是最终的宽度，没有margin-left
关于inline/inline-block级别元素的margin属性以及padding属性的一些理解
FuChenRenShen的博客
11-10 2572
总的来说，margin和padding属性作为新手入门时常用的属性，很多人都不陌生，相信理解起来都很简单，margin代表外边距，padding代表内边距，至少当时我们老师是这样讲的。 虽然使用起来很简单，但是真正将其实用的又能有多少人，以padding为例，作为一个内边距，就我而言，我会在使用  背景  以及  box-sizing  的时候使用的多，padding-box所占据的无非就是一点...
ie下inline-block的div元素设置margin-left无效果
a907482655的博客
01-15 174
ie浏览器不支持inline-block,需要hack一下 display:inline-block;*display:inline;*zoom:1; 转载于:https://www.cnblogs.com/unsea/archive/2013/01/15/2861236.html
inline, inline-block, block 区别 & 宽高设置 & 与margin、padding共用失效情况 整理
BigOrange的博客
11-16 1791
根据demo测试后的总结如下： display:inline; 并列显示在同一行 宽高不可设置； 宽高就是它包含的文字或图片的宽高。 margin：只有左右，上下失效 padding：padding-top会超出父级 display:inline-block; 并列显示在同一行 宽高可设置； 元素宽度在不设置的情况下，和内容的宽度一致 高度在不设置情况下，和内容高度一致（而对于...
inline元素与inline-block元素的margin与padding测试
陈迹·清欢的博客
04-06 645
目录测试paddinginline元素padding测试部分inline-block元素的padding测试部分测试margininline元素的margin测试inline-block元素的margin测试总结 测试padding inline元素padding测试部分 先上代码(注意以下所有代码只要为特殊声明，均给 * 的css选择器添加了margin:0与padding:0)： <sp...
display inline-block 布局 html,基于inline-block进行自适应列表布局
weixin_35003319的博客
06-21 1056
需求无论是电商网站展示商品列表还是个人博客展示文章列表，或者是社交站点展示好友列表，往往会遇到自适应列表布局的需求，本文介绍一种使用inline-block布局的方法。block,inline和inlinke-block细节对比● display:blocka. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。b. block元素可以...
css之display属性之inline-block布局实现详解
11-21
在这个详解中，我们将深入讨论`display`属性中的`inline`、`block`以及`inline-block`值，以及它们在实际布局中的应用。 1. **`display: inline`** `inline`值使得元素作为行内元素显示，这意味着元素会与其他...
block，inline和inline-block的概念以及区别
weixin_45432334的博客
02-25 498
1、block块级元素 block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。 block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。 block元素可以设置margin和padding属性。 2、inline内联元素 inline元素不会独占一行，多个相邻的行内联元素会排列在同一行里，直到一行排列不下...
inline、inline-block、block 的 margin 和 padding 表现
包磊磊的博客
11-05 1033
inline、inline-block、block 的 margin 和 padding 表现 Css inline、inline-block、block 的 margin 和 padding 表现概述 display 属性 表现 inline margin 在垂直方向上不生效；设置 padding 本身生效，但是没有把父级元素撑开； inline-block ...
inline-block标签元素不可以使用margin: 0 auto;
lu10505的博客
01-06 564
margin: 0 auto; 原意用于水平居中对齐，所以必须要得到自身的宽度才能定下自身在父级中居中的位置（此宽度必须为确切数值，默认为0），由于inline-block元素是块级元素，所以自己本身的宽度取决于内容本身的宽度，但是这个宽度并不是确切数值，所以代码在搜寻的时候不知道该给多少宽度，就选取了默认的0，导致居中失效。 解决方法： 情况简单（例如兄弟级别只有一个inline-blo...
inline-block 多余的 margin
weixin_34292287的博客
05-31 124
2019独角兽企业重金招聘Python工程师标准>>> ...
为什么margin:0 auto不能用于inline-block元素
ZHgogogoha的博客
03-23 592
块级元素的水平属性 块级元素在水平方向上有7大属性，margin-left、border-left、padding-left、width、padding-right、border-right和margin-right。 这7大属性的值加起来必须是元素包含块的宽度（这一点记住，一会要考????）。 这7个属性中，只有3个属性可以设置为auto：margin-left、width、margin-right，...
margin-right对span真的无效吗？
有术无道止于术，有道无术尚有可为。
05-04 540
我的思维是将span右外边距设置为0那么他不就变成右对齐了吗？然而并没有什么卵用，这是为什么呢？上个图你就知道了 首先我们写两个span，并设置他们的右外边距 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" con...
css 给inline和inline-block元素设置margin和padding
liudanyang_21的博客
08-18 893
经过简单的测试，行内元素或者行内块元素的maring-left,margin-right,padding-left,padding-right都是可以正常表现的，下面来看一下剩下的margin-top,margin-bottom,padding-top,padding-bottom。经过测试，margin-top和margin-bottom都没有作用。而设置padding-top以后，元素边框则会向上超出父元素，如下图所示，而不是像正常的块元素一样表现。 　　 　　而给行内元素加上padding-bot..
block、inline、inline-block三者的区别
清徐柳的博客
03-27 4878
block、inline、inline-block地区别
css —— inline、block、inline-block特性总结
huzhenv5的博客
03-24 1155
笔者做web前端已经做了很长时间了，常用的display属性就是inline、block和inline-block，对于他们的特性和区别有一个大概的了解，但是并不全面。今天笔者写这篇文章再来重新认识一下这三者和这三者之间的区别，再对平常使用过程中常常碰到的问题做个回顾和总结。 特性 inline： 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行 不能更改元素的...
display:inline-block什么意思
最新发布
12-29
display:inline-block是CSS中的一个属性，它用于将元素设置为内联块级元素。内联块级元素既具有内联元素的特性，可以和其他元素在同一行显示，又具有块级元素的特性，可以设置宽度、高度和内外边距等属性。 具体来说，display:inline-block可以实现以下效果： 1. 元素可以和其他内联元素在同一行显示，而不会独占一行。 2. 元素可以设置宽度、高度、内外边距等属性，这些属性在内联元素中是无效的。 3. 元素可以在同一行显示多个，并且可以通过设置宽度和高度来控制每个元素的大小。 使用display:inline-block的元素会根据内容自动调整宽度，如果内容超过了宽度，元素会自动换行显示。 下面是一个示例代码： ```html <style> .box { display: inline-block; width: 100px; height: 100px; background-color: red; margin-right: 10px; } </style> <div class="box"></div> <div class="box"></div> <div class="box"></div> ``` 上述代码中，使用display:inline-block将.box元素设置为内联块级元素，每个.box元素都具有宽度、高度和背景颜色，并且通过设置margin-right属性实现了元素之间的间距。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值