CSS中为什么padding不生效

Zincik

已于 2022-12-19 18:46:07 修改

阅读量3.8k

点赞数 3

分类专栏：前端常见BUG 文章标签： css 前端 html css3

于 2022-12-19 18:40:00 首次发布

本文链接：https://blog.csdn.net/weixin_49006730/article/details/128376198

版权

前端常见BUG 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、在span标签中或者label标签中为什么padding不生效。

因为span标签、label标签属于行内元素，行内元素里面的上下padding是无法改变的，也就是不生效的，但是左右padding是生效的。设置width和height也是不生效。其实是同理

解决方法

把span标签或者 label标签转为行内块元素即可

display：block //块元素，简单理解为：元素独自占一行

display：inline // 行内元素。简单理解为：可以并排在同一行，宽、高、边距不可修改，修改无效

display：inline-block // 行内块元素。可并排在同一行，且可以修改宽高和边距

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Zincik

关注关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS中为什么padding不生效

CSS中为什么padding不生效，width不生效，height不生效
复制链接

扫一扫

专栏目录

div嵌套div padding失效_最详细的div边距合并的问题和解决方法

weixin_35672512的博客

12-28

2816

对于前端来说写页面是最基础的东西了，但是想不到还是有人不理解边距合并的问题，昨天有网友问我为什么设置的margin不是我设置的实际效果？好吧，废话不多说，下面来说一下关于margin合并的问题。解决margin合并的方法有好多种：首先说一下嵌套关系的margin合并问题。1.给父元素添加padding-top值和padding-bottom值2.给父元素添加border值3.给父元素添加属性ove...

CSS实现的中英文双语菜单效果代码

09-24

本篇文章将详细解析如何使用CSS实现中英文双语菜单效果。在网页设计中，创建一个既美观又实用的菜单对于提升用户体验至关重要。这里我们将探讨CSS中的hover属性以及如何利用它来实现鼠标悬停时的动态效果。首先，...

参与评论您还未登录，请先登录后发表或查看评论

css中设置padding无效的问题

m0_73814236的博客

02-16

1909

子元素宽度设置为100%时，给子元素添加padding不生效。

内联元素的padding，margin，border等不起作用的原因

不服输的小白

10-15

5208

内联元素的padding，margin，border等不起作用的原因

css padding操作对于高度为0的标签不起作用

最新发布

weixin_42146720的博客

12-26

437

css padding 失效

为什么给css添加border和padding不起效果

周二也被占用

09-21

2561

为什么给css添加border和padding不起效果？在写jsp页面的css时，明明修改了css，添加了padding:0px,100px;或者是margin:0px,100px; 跳转到浏览器页面时，发现修改的没有效果。一直百度，找不到reason。后面再一调试发现原因是要这样写，padding-left,or margin-left。jsp的页面不支持padding和margi

Kotlin Compose padding 设置 padding 不生效

丿灬安之若死

06-14

360

将会是真正的pading而则是留白

span设CSS样式总是不起作用的解决方法

09-25

内联元素默认不接受诸如 `width`, `height`, `margin`, `padding` 这样的盒模型属性，这也是为什么直接为 `span` 设置这些样式时可能无效的原因。在描述中提到的解决方案是将 `span` 转换为块级元素（block element...

css2中文手册学习

07-08

在网页设计领域，CSS（Cascading ...在学习过程中，结合实际项目进行练习，将理论知识转化为实际技能，是提升CSS2能力的关键步骤。同时，了解并掌握CSS2的最新标准和浏览器兼容性，将使你的设计更具前瞻性和实用性。

CSS2中文手册

07-27

- **盒模型**：CSS2中的盒模型包括元素的content（内容）、padding（内边距）、border（边框）和margin（外边距），是理解元素尺寸计算的关键。 - **选择器**：CSS2引入了更丰富的选择器，如类选择器（.class）、ID...

IE6/7 and IE8/9(Q)中td的上下padding失效的解决方法

12-09

如下复制代码代码如下: <!DOCTYPE HTML> <HTML> <HEAD> <meta charset=”utf-8″> <title>IE6/7 and IE8(Q) 中td的上下padding失效</title> <style> table { border:1px solid #555; } td { background:#CCC; padding:40px;} </style> </HEAD> <BODY> <table cellpadding=”5″ cellspacing=”5″> <tr> <td></td> </tr> <tr> <td> </td> </tr>

举例详解CSS中的的优先级

09-25

在这种情况下，按照级联规则，后面定义的样式将会覆盖前面的，所以`.padding`的样式将会应用到元素上，背景剪裁将设置为`padding-box`。了解并掌握CSS优先级对于编写高效且无冲突的CSS至关重要。通过合理使用选择...

CSS给盒子内部标题加padding以及margin不起作用

zhangzhuo1130的博客

01-19

319

CSS给盒子内部标题加padding以及margin不起作用可见加的上下padding都超出父盒子解决方案原因：行内元素需要声明才可以对padding以及margin上下有作用

view设置padding无效的问题

m0_37780940的博客

11-23

2328

在写一个自定view的时候,需要给一个子view设置padding值,但是没有任何效果.最后发现stackoverflow中有提到. 解决的方式就是: 先设置背景,再设置padding. 这是什么操作??? 按照提供方案尝试发现: view设置padding之后,在设置view的background,会使padding失效. 解决方法: 在设置padding之前,设置background 在设...

盒子 padding 值无效

chris__XU的博客

09-01

997

box-sizing: content-box; box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素

css 滚动条导致padding-right失效

baidu_40537062的博客

09-06

1355

在子容器外面再套一层(亲测有效) <div class="father"> <div style="width: 300px; padding: 20px;"> <div class="son"></div> </div> </div> 参考博客 padding右边距失效问题，出现滚动条时，右边并没有出现留白 ...

css布局中关于padding-right不生效的问题。

热门推荐

qq_44419884的博客

02-13

1万+

css布局中关于padding-right不生效的问题。例如： .m-header .search-box form { position: relative; width: 100%; height: 36px; padding-left: 60px; padding-right: 60px; } 此时的...

登录按钮padding无效

会飞的猪Pippa

04-12

704

<input type="text" placeholder="Email" required=""> <input type="password" placeholder="密码" required=""><input type="submit" value="登录" />页面中的登录按钮与其它两个输入框虽然给设置同样的样式，但登录按钮却没有被撑起来。原由：input[type=”button”]

通过再套一个盒子来解决padding不起作用的问题

tiger.passion

03-05

301

当发现使用padding 或margin属性在ff 中不起作用时，尽管你在文本中已经声明好了浏览器分别会采用standart 模式和most standart 模式来进行解析，但此时还是会出现上面说到问题，虽然对此时对盒子的计算模式是相同了，但在嵌套盒子的理解上还是存在着一些差别，可以采取解决的方法是在需要作用的盒子里面再嵌套一个一个空盒子。（如果是在外面写个空盒子的话，效果不变，问题依然存在）...

vue中css设置只在当前页面生效

04-07

在Vue中，可以使用scoped属性来限制样式仅在当前组件生效。scoped属性将在样式中自动添加唯一的属性选择器，以确保样式仅在当前组件中生效。例如，假设我们有一个名为MyComponent的组件，并希望样式仅在该组件中生效。我们可以使用以下代码： ```html <template> <div class="my-component"> <h1>Welcome to MyComponent</h1> <p>This is some content.</p> </div> </template> <style scoped> .my-component { background-color: #f0f0f0; padding: 20px; } h1 { color: blue; } p { color: green; } </style> ``` 在上面的代码中，我们使用了scoped属性来限制样式仅在当前组件中生效。因此，我们可以安全地使用h1和p元素选择器，因为它们只会应用于当前组件中的元素。注意，scoped属性仅适用于样式块中的选择器，而不适用于全局样式。因此，如果您将样式直接放在html文件或全局样式表中，则它们将在整个应用程序中生效。