HTML、CSS基础篇 为什么margin-left能用 margin-right不能用

最新推荐文章于 2022-02-28 18:42:49 发布
最新推荐文章于 2022-02-28 18:42:49 发布
阅读量2k 收藏 3
点赞数 3
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengjianghao/article/details/102635949
版权

为什么margin-left能用，而有时候margin-right却没有用？

 

浏览器默认从左向右渲染，所以元素是从左向右排列的,margin-right其实有效果的，只是在默认即标准流的情况的下显示不出来效果。如果脱离标准流呢？想到这个，就立马在css文件中加了一个：float:right;然后在测试的时候就能看到margin-right的效果了

用float:left也是不行的，这跟默认的情况是差不多的。 
 

解决方案：

要想从右向左,需要float:left脱离标准流的限制

1、在CSS里设置：float：right，这时margin-right有用

2、它的右面有其他盒子

 

Undefind_object
关注
专栏目录
margin-right无效问题简析
money_monkey的博客
07-18 4720
margin-right无效问题简析
margin-right没效果，怎么解决
hechenxi_gaoya的博客
07-21 9398
我们在设置盒子样式或者位置的时候会遇到margin-right没有效果。要怎么解决呢？首先要观察一下设置margin-right的元素有没有设置width属性，width的属性值是什么。 当没有设置width时，width默认为auto： 这时的margin-right是正常显示的； 当width设置为固定值或者百分比时： margin-right在默认文档标准流中是无效的，要想显示出效果，必须要脱离文档标准流，可以用下面的方法恢复margin-right的效果： float：left | right；
margin-right右边距失效
weixin_34353714的博客
08-25 1971
默认状态下的块级元素右边距是无效的 　　设置float（除了none以外的值）、display (inline-block，inline-flex，inline-grid，inline-table，inline-box，table)、position（absolute，fixed）之后会生效。 当父元素的宽度小于子元素的宽度时，子元素的右边距无效。 ...
css布局：为什么margin-right不起效果，如何居中显示。
scarlett1017的博客
05-08 2946
css布局：为什么margin-right不起效果 ，以及如何居中显示。 不清楚这个问题其实是没有弄明白网页水平布局的一个小原理 假设这里有一个div，在这个div盒子里面有一个小的div盒子 （这里大div盒子称作父元素，小的div盒子称作子元素） 满足一个公式 子元素中的：margin-left，margin-right，padding-left，padding-right，border-left，border-right，width ，相加会等于父级元素的宽。 那么为什么设置了margin-left
el+vue实战 ① 为什么有时候margin-left没有效果，而margin-right有效果？
zujiasheng的博客
02-28 1741
网页部分： 代码部分： margin-left没有效果，margin-right有效果。 解决方式：margin-left后面加上!important .add-btn{ margin-left: 56rem !important; margin-bottom: 1rem; } F12打开查看发现margin-left如果不加！important，发现样式会被覆盖： 其他解释：一个关于css中margin-right没有效果的问题_chengj.
深入理解css中的margin属性（推荐）
01-21
之前我一直认为margin属性是一个非常简单的属性，但是最近做项目时遇到了一些...要介绍margin的基础知识，我们不可回避地要谈到css盒子模型（Box Model），一般而言，css盒子模型是用来设计和布局的。它本质上是一个盒
CSS重要属性之 margin 属性知识大整合(必看篇)
09-24
margin属性实际上是一个缩写属性，包括了上、右、下、左边距（margin-top, margin-right, margin-bottom, margin-left）。开发者可以为每个方向单独设置边距，也可以使用简写形式一次性设置多个方向的边距值。 ...
CSS基础知识总结-新手入门篇
08-03
**CSS基础知识总结** **1. CSS概述** CSS（Cascading Style Sheets）是层叠样式表，主要用于美化HTML页面。它允许我们独立于内容来定义网页的布局和样式，使得网页设计更加灵活和可控。CSS可以控制网页元素的颜色、...
正确理解CSS中的margin合并的用法
09-27
1. **兄弟元素间的margin合并**：可以通过为元素设置浮动（如`float: left`）或者使用Flexbox或Grid布局来避免合并。另一种方法是在元素之间插入内联元素，如无宽度的空元素或伪元素（如`:before`或`:after`）。 2....
Web-前端html+css从入门到精通 132. BFC规范（上）.zip
05-23
5. overflow值不为visible的元素 理解BFC的工作原理是掌握CSS布局的关键。在BFC内，元素按照以下规则进行布局： 1. 块级元素从顶部开始垂直排列，每个元素的margin不会与前一个元素的margin合并。 2. 每个元素的...
html文本框的margin,HTML DOM Style marginTop 属性 | 菜鸟教程
weixin_42160278的博客
06-05 445
Style marginTop 属性 Style 对象定义和用法marginTop 属性设置或返回元素的上外边距。语法设置 marginTop 属性：Object.style.marginTop="%|length|auto|inherit"返回 marginTop 属性：Object.style.marginTop值描述%定义基于父元素宽度的百分比上外边距。length使用 px、cm 等单位定...
html margin-left 兼容性,margin-top margin-left兼容
weixin_30375113的博客
06-23 301
常出现两种情况(一)margin-top失效先看下面代码：float:leftclear:both; margin-top:20px;两个层box1和box2，box1具有浮动属性，box2没有，这时候设置box2的上边距 margin-top没有效果。www.webjx.comfloat:leftclear:both; margin-top:20px;[Ctrl+A 全部选择 提示：你可先修改部...
html marginleft属性,css margin-left属性怎么用
weixin_42348371的博客
06-10 1238
css margin-left属性用于设置元素的左外边距，允许使用负值。所有主流浏览器都支持 margin-left 属性。css margin-left属性怎么用？margin-left属性设置元素的左外边距。可设置的属性值：●　auto：浏览器计算下外边距。●　length：规定以具体单位计的下外边距值，比如像素、厘米等。默认值是 0px。●　%：规定基于父元素的宽度的百分比的下外边距。●　i...
html中心位置如何调整,html – 设置中心位置的margin-left和margin-right
weixin_31205191的博客
05-30 387
我想将中心设置为.user-menu位置,但下面的代码不起作用.我怎么解决这个问题？تاریخچه خریدحساب کاربریCSS* {margin: 0px;padding: 0px;font-family: Tahoma;}.centered {margin-left: auto;margin-right: auto;}.menu-items {float: left;height: 9...
盒子嵌套盒子，内部盒子margin-top失效而margin-left有效详解
SUNNY_PLAY的博客
07-10 947
先看代码： 执行结果如下图： 内盒margin-top设为30px； margin-left设为30px； 可以看到左外边距有效而顶外边距使外盒向下移动了30px； 1.margin-left： 外盒没有向右移动是受文本流的影响 2.margin-top： 外盒受影响向下移动是因为外盒没有内边距丶边框，其仍然以浏览器为参考线。给外盒设置边框border丶内边距可以解决，也可以设置浮动和(over...
为什么调html中margin没有变化,CSS中margin不起作用的原因及解决方法
weixin_39595008的博客
06-17 458
margin是一个属性，指定元素和元素之间的间距，但不能为内联元素指定边距，本篇文章将给大家介绍关于CSS中margin不起作用的原因及解决方法。margin不起作用的原因对于初学者来说，可能会经常遇到即使你设置了margin属性但是却不起作用。在理解margin前，我们先来看一下盒模型margin不起作用的原因往往是没有考虑到display：“display:block”或者“display:i...
在html中设置margin属性,margin
热门推荐
weixin_39520149的博客
06-05 1万+
margin(CSS语法)编辑锁定讨论上传视频margin，是CSS语法，这个简写属性用于在一个声明中设置所有当前或者指定元素所有外边距的宽度，或者设置各边上外边距的宽度。中文名外边距[1]外文名margin编程语言CSSmargin定义编辑margin 简写属性在一个声明中设置所有当前或者指定元素外边距属性。该属性可以有 1 到 4 个值。margin 属性接受任何长度单位、百分数值甚至负值。m...
[Web前端] Margin 失效问题, 设置了 Margin 却不见效果, 解决方案.
诺尔的博客
03-07 3723
首先演示下: .box1{ width: 300px; height: 300px; } .box2{ width: 200px; height: 200px; } .box3{ width: 100px; height: 100px; } .border-with{ border: solid 1px pink; } .padding-with{ padding: 1px; } .style-pink{ background-colo
给行内元素设置宽高不起作用，但是给行内元素设置margin、padding只有左右起作用
KanaseKanon的博客
07-01 387
<div>div 1</div> <span>span 1</span> <span>span 2</span> <div>div 2</div> div { width: 100px; height: 100px; text-align: center; background-color: #94E8FF; } span { background-color: #FFB
CSS基础布局：单列与两列自适应技巧详解
总结起来，这篇文章提供了一个基础的CSS布局指南，适合初学者理解和掌握基本的网页布局技巧。通过这些方法，开发者可以创建出响应式且适应不同设备屏幕的网页设计。如果你需要深入学习，可以在网上找到更多关于这些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值