对行内元素设置padding和margin不起作用

最新推荐文章于 2022-10-18 22:02:10 发布
最新推荐文章于 2022-10-18 22:02:10 发布
阅读量1.2k 收藏
点赞数
分类专栏： css 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44645309/article/details/111938433
版权
本文探讨了在HTML中行内元素设置padding和margin时，只有left和right生效，而top和bottom不起作用的问题。通过示例代码展示了问题现象，并提出了解决方案，即转换行内元素为块级元素，以使padding-top和padding-bottom生效。
摘要由CSDN通过智能技术生成

前言

看了表严肃表哥的电商网站项目，自己动手亲自实现了一遍，前前后后遇到了几个问题，特此总结一下。

1、问题

无论是padding还是margin，都只有left和right起作用，top和bottom不起作用，示例如下：

代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="test.css" type="text/css">
最低0.47元/天 解锁文章
厕所打你
关注
专栏目录
6-2、选择器
鸵鸟
09-06 951
选择器
行内元素对margin/padding-top/bottom无效，应转换为行内块、块元素
crazy w
07-04 327
行内元素对margin/padding-top/bottom无效，应转换为行内块、块元素
##CSS布局-a标签中的padding-top不起作用的解决方法
七元八元
05-16 7421
1、a标签元素是内联元素，默认上下内边距跟上下外边距不起作用；nav ul { overflow: hidden; border-left: .1em solid; } nav li { display: inline; } nav li a { padding: .5em 3em; //只设置 标签的上下内边距 border-right: .1em so...
Margin和padding失效
weixin_30834019的博客
06-22 471
太久不写原生果然不行，Margin和padding对div有效，对span失效，原因就不解释了（元素性质，块状之类的） 转载于:https://www.cnblogs.com/ww01/p/11069672.html
padding-top或margin-top 失效
weixin_30649641的博客
02-18 277
经常会遇到Firefox下 margin-top这失效的问题 在css2.1中，水平的margin不会被折叠。 垂直margin可能在一些盒模型中被折叠： 采取清除浮动的方法可以解决 转载于:https://www.cnblogs.com/JohnFeller/articles/1669187.html...
关于margin和padding失效问题
weixin_43982675的博客
09-23 3319
关于margin和padding失效问题 当我写的margin/padding写的没毛病的时候他没有给我显示出来我想要的结果是什么情况？ 这种情况出现的时候请你先检查你的代码是否有问题，若是代码没有问题的话就是出现了BUG。那么该如何解决的？ 当你的margin出现问题的时候只要在父元素中加入overflew：hidden 就可以解决它的问题。但是当你的父元素出现溢出情况的时候...
css行内元素padding,margin,width,height没有变化
09-25
在CSS中，元素被分为块状元素和行内元素两种主要类型。它们在布局和样式表现上有着本质的不同。块状元素占据全部可用宽度，并且前后元素会自动换行；而行内元素则仅占据其内容所需的宽度，前后元素不会换行。由于...
mysql padding_margin和padding对行内元素的影响
weixin_42266267的博客
01-28 404
这个是在面试的时候，面试官问我的一个小问题 自己没有考虑过inline元素设置margin和padding的问题 学习的过程记录下来1)inline元素的高度是由元素的内容决定的(字体的大小和行高) 比如你对一个a标签设置它的高度是没有效果的2)HTML元素分为替换元素和非替换元素 替换元素指的是作为其他的元素占位符的一个元素 例如img 非替换元素指内容包含在文档中的元素 hahaha这个...
微信小程序布局之行内元素和块级元素
03-29
当设定新的宽度，如果宽度是100%，并且padding、margin不为零，导致块级元素宽度溢出父元素 3、盒子模型的高度默认由内容决定 4、盒子模型中高度、宽度和内外边距都是可控制 5、可以容纳行内元素和其他块级元素。  ...
内联元素的padding，margin，border等不起作用的原因
不服输的小白
10-15 5251
内联元素的padding，margin，border等不起作用的原因
行内元素的padding和margin是否无效
weixin_30980795的博客
06-04 360
html中元素分为三种：块级元素、行内元素（也叫内联元素），内联块级元素。 常用块级元素：、、…、、、、、、 、 块级元素特点： 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（霸道，一个块级元素独占一行） 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致） 常用内联元素：、、、、、、、 内联元素特点： 1、和其他元素都在一行上； 2、元素的高度、宽度及顶部和底部边距不可设置； 3、元素的宽度就是它包含的文字或图片的
CSS基础：margin在行内元素及行级块元素失效&两个元素之间margin重叠
weixin_52854090的博客
10-07 385
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> span{ /* 行内元素margin上下被忽略 */ margin-top: 50px; margin-bottom: 100px; /* 行内元素margin左右不能使用auto,可以.
div嵌套引起的margin-top不起作用
weixin_30549175的博客
11-08 207
通常大家在制作网页的过程中会遇到很多棘手的问题，比如我在写一个页面的时候，遇到了div嵌套引起的margin-top不起作用，对内部的div设置margin-top时，内部对于外部的div并没有产生一个margin值，而是外部的div相对于上面的div产生了一个margin值，为什么会出现这种情况？？？ 　　这是因为嵌套div中margin-top出现转移，在部分浏览器中，两个嵌套的div，...
哪些情况下margin-left和padding-left无效？
weixin_30478619的博客
11-13 198
inline元素没有margin-top和margin-bottom inline元素的padding-top和padding-bottom不影响周围的元素 thead，tbody，tfoot，tr没有margin和padding，其实是因为display分别是table-header-group，table-footer-group，table-row-group，table-...
margin auto不对行内/行内块有效的原因
m0_52711377的博客
10-18 425
除此之外，绝对定位元素如果在对立方向设置了相同数值，也会产生流体特性。inline-block：没有流体性，因为元素会改为收缩性（shrink），收缩到他可以收缩的最小宽度。流体特性：元素可以自适应它所处包含块的尺寸。比如常见的块级元素，默认是占满整个包含块的水平宽度。margin：auto只对有流体特性的元素生效。
bootstrap 学习01 container 中padding值问题
天天的博客
02-23 659
<div class="container wg"> java </div> 默认container 有 左右padding 15px 这点要清楚的知道！ 我们要加row 就没有padding 了，给大家看下！ 结果如下： 因为row 会有margin 都是-15px 刚好抵消掉 padding 的值！ ...
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效？
陆氪和他的那些代码
05-22 1541
1、首先行内元素是否具有盒子模型？答：行内元素同样具有盒子模型。2、行内元素的 padding、margin 是否无效？答：行内元素的 padding-top、padding-bottom、margin-top、margin-bottom 属性设置是无效的。行内元素的 padding-left、padding-right、margin-left、margin-right 属性设置是有效的。行内元素...
行内元素的padding、margin是否无效
sleepwalker_1992的专栏
06-12 1664
行内元素是否具有盒子模型？ 答：行内元素同样具有盒子模型。 行内元素的padding、margin是否无效？ 答： 行内元素的padding-top、padding-bottom、margin-top、margin-bottom属性设置是无效的 行内元素的padding-left、padding-right、margin-left、margin-right属性设置是有效的 行内元素的pa...
1.rgba() 和 opacity的透明效果有什么不同？ 2.行内元素和块级元素的区别是什么？行内元素的pdding和margin可以设置吗？ 3.display的属性值有哪些？分别有什么作用？
最新发布
05-31
1. rgba() 和 opacity 都可以实现透明效果，但实现方式不同。opacity 是通过设置元素的不透明度来达到透明效果，它会影响元素及其内容的透明度，而 rgba() 只会影响元素的背景色透明度。 2. 行内元素和块级元素的区别在于它们的表现形式和默认宽度。块级元素会独占一行，默认宽度是其父元素的100%，可以设置宽度和高度，常见的块级元素有 div、p、ul、li 等；行内元素则不会独占一行，宽度和高度由其内容决定，不能设置宽度和高度，常见的行内元素有 span、a、img 等。行内元素的 padding 和 margin 可以设置，但是只会在水平方向上起作用。 3. display 的属性值包括 block、inline、inline-block、flex、grid 等。block 表示将元素以块级元素的形式呈现，独占一行；inline 表示将元素以行内元素的形式呈现，不独占一行；inline-block 则表示元素既具有行内元素的特点，又具有块级元素的特点；flex 和 grid 则是用来设置弹性布局和网格布局的。不同的 display 值会影响元素的默认表现形式和布局方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值