前端学习——内联元素例如<i>、<a>、<span>等对他们添加margin、padding的top和bottom属性不起作用

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

内联元素例如

<i>、<a>、<span>

等对他们添加margin、padding的top和bottom属性不起作用

解决办法是给他们添加display:block让他们变为块级元素，之后便会起作用

S_brody
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Span元素的width属性无效果原因及解决方案
12-11
先运行下程序看下: <span xss=removed>123</span> 输出:123 可以看到 span会自动根据包含的内容来变化宽度 这是因为:对于内联元素(可以是默认即为内联的比如 span 元素，也可以是 display: inline 的元素) width 和 ...
margin失效情形解析
ylleve的博客
02-11 4659
margin属性在以下情况下会失效 display计算值为inline的垂直margin无效 <p style="margin-top: 40px;display: inline;">content</p> 表格中的tr和td元素或者display计算值为table-cell或table-row的元素 margin 合并的时候，更改 margin 值可能是没有效果的。以...
margin-top失效的情况以及解决方法
_纳川
07-20 3175
margin-top失效的情况，以及解决方法 在做练习是发现，将一个盒子在另外一个盒子中居中是，发现给在中间显示盒子加margin-top时失效了，结果是两个和都下移动了！！！ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>margin异常的问题&lt...
margin-top 不生效的原因和解决方法
weixin_30617695的博客
09-04 4122
div嵌套引起的margin-top不起作用 (2012-04-06 10:56:35) 嵌套div中margin-top转移问题的解决办法在这两个浏览器中，有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。<!DOCTYPE html PUBLIC "-//W3C//D...
CSS Margin失效问题
softmanfly的专栏
08-24 1368
前端 CSS
Web前端笔记-i标签做小图标以及改源码注意事项
热门推荐
IT1995的博客
06-22 1万+
目录 最简单的使用i标签做小图标 修改前端源码注意的问题 最简单的使用i标签做小图标 运行截图如下： 实例结构如下： 此处就是使用i标签制作的小图标 其中html源码如下： <html> <head> <title>Hello World</title> <link href="test.css" r...
定义内联元素span的最小高度问题
01-19
其实这个问题很简单——先要认清span的属性，因为span属于内联元素，而内联元素是忽略宽度和高度的，明白了这一点解决就很简单了，解决的办法就是利用css将span变为盒装元素即可。 将内联元素定义为盒装元素的方法有...
<3>华为工程师 ，带你实战C++(2018版)
06-10
这是一套全面而系统的C++学习教程： 1，C++对C的全面提高(类型增强，函数重载，默认参数，引用，new/delete 内联函数，类型强转，命名空间，系统string类。2，封装，类与对象，友元，运算符重载。 3，继承与派生，...
css 块状元素和内联元素
12-12
在用CSS布局页面的时候，我们会将HTML标签分成两种，块状元素和内联元素（我们平常用到的div和p就是块状元素，链接标签a就是内联元素）。是在CSS布局页面中很重要的两个概念，必须要理解透彻！既然说到概念就先看看...
html5 i标签什么意思,快速了解HTML5 b和i标签
weixin_28292761的博客
06-17 868
b 和 i 标签在现在的 Web 标准潜规则中是不推荐使用，甚至是反对使用的，因为认为他们只是“表现”粗体和斜体，而没有任何“语义”。更多的用 strong 和 em 标签代替。而在新的 HTML5 工作草案 中对于 b 和 i 标签是这样定义的：代码如下:Thebelementnowrepresentsaspanoftexttobestylisticallyoffset...
Web前端学习笔记（七）～h、p、i、b、br、hr标签
海到无边天作岸 山登绝顶我为峰
07-16 6041
DEMO <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1&g
HTML 块标签，行内标签，行内块标签以及之间的相互转换
zilaiye1314的博客
09-22 1万+
参考文献： http://www.cnblogs.com/792155879a/p/5680444.html http://blog.csdn.net/yudiandemingzi/article/details/54613234            HTML 块标签，行内标签，行内块标签以及之间的相互转换 ++++++++++++++++++++++++
给li标签中的span设置属性margin-bottom不生效
感恩、奋进、自信
10-28 2834
给li标签中的span设置属性margin-bottom不生效html如下： &lt;ul class="lottery_main""&gt; &lt;!-- 每个中间人的头像和名字 --&gt; &lt;li class='li25'&gt; &lt;span class="lottery_name25"&gt;飘
【问题处理笔记】在CSS中span标签设置padding-top/bottom以及margin-top/bottom无效的解决方法
野臻
12-23 7787
在CSS中span标签设置padding-top/bottom以及margin-top/bottom无效的解决方法
在span中margin失效的解决方法
shirlly
09-14 2441
[quote] 因为span默认是行属性，而div默认是块属性，把span强制设为块属性就可以了。 即把这段 span{ margin-left:25px; margin-top:200px; } 改为 span{ margin-left:25px; margin-top:200px; display:block; } [/quote]...
a标签和p标签不能设置margin
weixin_30470643的博客
08-16 981
经常会发现正常div的属性在a标签上或者p标签上都不管用，这是因为a标签和p标签都不是盒子模型。 例如： <div style="margin-top:5px;"></div> 这是有效的距离，但是 <a style="margin-top:5px;"></a> 这就是无效的距离 原因很简单，margin是针对盒子的，a标...
php中<i></i>标签,用i标签<i></i>用作小图标的原因
weixin_31068491的博客
03-18 1230
用 元素做图标在语义上是不正确的(虽然看起来像 icon 的缩写)； 比 短，但 gzip 后差异很小，不过打字可以少按三个键；多数图标用的是空 元素，配合 ::before 伪元素实现，因为没有内容，读屏器不会朗读(这样即使有特殊处理也跳过了)，机器理解起来应该也没什么影响。综合来看，从实用性上暂时没看出有什么缺陷，所以目前用不用 取决于你对于遵循规范有多洁癖。基本语法:before 和...
CSS Vue 中使用标签 i 设置图标和hover样式（小技巧）
前端技术
03-02 7610
样式如下： 方式一：使用图片 <template> <div class="main"> <div class="win"> <div class="title"> <i class="icon close-icon"/> </div> </div> </div> </t
1.设计一个网页，使用内联语义元素<a> <br> <del> <ins> <mark> <span> <sub><sup>
最新发布
11-01
其中，<a>元素用于创建超链接，<br>元素用于换行，<del>和<ins>元素用于表示删除和插入的文本，<mark>元素用于突出显示文本，<span>元素用于为文本设置样式属性，<sub>和<sup>元素用于表示下标和上标。在设计网页时...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值