margin-right没效果，怎么解决

最新推荐文章于 2024-03-20 13:40:09 发布

仙人不俗

最新推荐文章于 2024-03-20 13:40:09 发布

阅读量9.5k

点赞数 5

文章标签： html css

本文链接：https://blog.csdn.net/hechenxi_gaoya/article/details/107483065

版权

我们在设置盒子样式或者位置的时候会遇到margin-right没有效果。要怎么解决呢？首先要观察一下设置margin-right的元素有没有设置width属性，width的属性值是什么。

当没有设置width时，width默认为auto：

这时的margin-right是正常显示的；

当width设置为固定值或者百分比时：

margin-right在默认文档标准流中是无效的，要想显示出效果，必须要脱离文档标准流，可以用下面的方法恢复margin-right的效果：

float：left | right；
设置position；
设置display；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

仙人不俗

关注关注

5
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

关于margin-top兼容问题

weixin_53278262的博客

12-21

576

关于margin-top兼容(传递)问题,我相信不少小伙伴在日常生活中经常遇到吧,我先举个栗子吧,这样便于大家理解 html代码: <div class="box"> <div class="child"></div> </div> css代码: * { margin: 0; padding: 0; } .box {

都1902年了,还不知道用margin:auto给flex容器内元素分组?

十八酱君

12-01

279

最近看到几篇博文讲解margin:auto在flex容器中的使用,可惜的是大多讲解都浮于页面表现,没深究其中的作用机理,本文在此浅薄对其表现机理做简单探讨. 引子日常业务迭代过程中,flex已经是前端工程师解决常见布局的神兵利器.但是随着使用的深入,偶然会发觉flex对于简单的布局足够直接迅速,但是对于稍稍复杂一些的布局,就需要层层的包裹分组来解决.举个栗子,下图是我们常见的布局图: ...

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

一个关于css中margin-right没有效果的问题

12-13

今天在群里面，有人抛出了一个关于css中margin-right没有效果的问题。CSS代码和HTML代码如下：复制代码代码如下: .style1{ width:400px; height:440px; background-color:red; border:5px solid silver; margin-top:20%; margin-right:30%; } 复制代码代码如下: <html> <head> <link rel=”stylesheet” type=”text/css” href=”mystyle.css”> </head> <body> <div class=”sty

margin-right无效问题简析

money_monkey的博客

07-18

4826

margin-right无效问题简析

css布局：为什么margin-right不起效果，如何居中显示。

scarlett1017的博客

05-08

3039

css布局：为什么margin-right不起效果，以及如何居中显示。不清楚这个问题其实是没有弄明白网页水平布局的一个小原理假设这里有一个div，在这个div盒子里面有一个小的div盒子（这里大div盒子称作父元素，小的div盒子称作子元素）满足一个公式子元素中的：margin-left，margin-right，padding-left，padding-right，border-left，border-right，width ，相加会等于父级元素的宽。那么为什么设置了margin-left

遇到的几个小问题（margin-right不能用）

Xieyp040的博客

03-12

3624

在做一个页面的时候遇到这个问题在用magin-left时候简直完美However在我用margin-right之后，他是这样色的难过，一脸懵逼。然后查了一下，找到了原因，但很深层次的也没有找到，先用float解决了。嗯嗯，解决得很完美，给自己点个赞！然后探讨深层问题：某大神是这样说的：结合w3school对margin-right和自己隐约的记忆：浏览器是默认左对齐的。灵感一来，margin-ri...

关于margin-right失效的问题

热门推荐

张大晴的博客

05-16

1万+

关于margin-right失效的问题：浏览器默认从左往右渲染元素，在没有超出父容器的宽度的前提下如果子容器的宽度能够被容纳设置margin-right是没有用的...

clear:both后margin-top不起作用其他左右下都起作用

09-25

在这种情况下，`clear:both`的`margin-top`不起作用的原因在于，它是针对清除浮动的效果，而不是影响元素自身的垂直外边距。`clear:both`实际上创建了一个新的块格式化上下文（Block Formatting Context, BFC），在...

简单谈谈margin负值的作用

10-20

通过设置一个负的margin-right或者margin-left，你可以消除这个间隙，让元素看起来像是无缝连接。负margin还可以用于创建自适应布局。例如，在响应式设计中，当屏幕尺寸变化时，元素的位置可能需要动态调整。负...

margin-left和right失效(斯芬克斯)之谜

01-24

一般很多人遇到的margin失效都是纵向上面的: 一种情况是元素的确不支持margin-top/bottom(参看：关于margin-top/bottom在inline元素（non-Replaced）上不起作用的解释); 另一种情况则是元素产生了margin叠加（参看：如何避开麻烦的margin叠加(margin collapsing)）。那么margin-left/right怎么又会失效的呢？假如看过斯芬克斯之谜-IE私有属性haslayout的困扰那篇文章的童鞋，就会了解了：哦，又是haslayout啊。我们来看看具体的失效代码：

css布局绝对定位下margin失效的解决方法

09-25

在这种情况下，如果再设置margin:auto，通常不会产生居中的效果，因为margin:auto一般用于块级元素的水平居中，而在绝对定位下，这种居中方式会失效。解决绝对定位元素居中的方法是利用margin-left或margin-top...

绝对定位的盒子设置margin-right为什么不起作用？

m0_48270515的博客

08-25

2053

.test1{ position: absolute; width: 100px; height: 100px; background-color: pink; left: 50%; margin-left: -100px; } ```这里盒子的左边框先相对于浏览器的左边偏移50%（ left: 50%;）再相对于浏览器的左边走-100px （ margin

关于margin-right使用不了的问题

awawaw154的博客

10-12

1135

先上html结构 <body> <ul> <li> <input type="checkbox" class="ol-check" name="" id="" value="" /> <h4>你好呀</h4> <a href="#" style="margin-right: 0;">删除</a> </li> </ul> </

margin-right右边距失效

weixin_34353714的博客

08-25

1992

默认状态下的块级元素右边距是无效的　　设置float（除了none以外的值）、display (inline-block，inline-flex，inline-grid，inline-table，inline-box，table)、position（absolute，fixed）之后会生效。当父元素的宽度小于子元素的宽度时，子元素的右边距无效。 ...

view 父子元素margin-right失效解决办法