今天在群里面，有人抛出了一个关于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="style1"><img src="bei.jpg"></div>

</body>

</html>

把他的代码copy下来，换一张图片，我做了一个test，还真的不行。

难道是top会隐藏掉right的效果？或者跟顺序有关？后来证明这些都是错误的想法。结合w3school对margin-right和自己隐约的记忆：浏览器是默认左对齐的。灵感一来，margin-right事实上有效果的，仅仅是在默认即标准流的情况的下显示不出来效果。假设脱离标准流呢？想到这个，就立刻在css文件里加了一个：float:right;然后在測试的时候就能看到margin-right的效果了。

用float:left也是不行的，这跟默认的情况是差点儿相同的。

PS：关于right属性无效的原因：right属性仅仅有在position是absolute的情况下才有效，而默认的position值是static，right属性是无效的。建议能不使用right就不要使用right属性。

关于margin-right的应用问题的更多相关文章

  1. 金融量化分析【day112】：因子选股

    一.因子选股基础 二.因子选股策略实现代码 # 导入函数库 import jqdata import psutil #初始化函数,设定基准等等 def initialize(context): set ...

  2. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  3. 深入理解CSS中的margin负值

    前面的话 margin属性在实际中非常常用,也是平时踩坑较多的地方.margin折叠部分相信不少人都因为这样那样的原因中过招.margin负值也是很常用的功能,很多特殊的布局方法都依赖于它.它看似简单 ...

  4. margin折叠-从子元素margin-top影响父元素引出的问题

    正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! ...

  5. CSS margin详解

    以下的分享是本人最近几天学习了margin知识后,大有启发,感觉以前对margin的了解简直太浅薄.所以写成以下文章,一是供自己整理思路:二是把知识分享出来,避免各位对margin属性的误解.内容可能 ...

  6. 基于Caffe的Large Margin Softmax Loss的实现（中）

    小喵的唠叨话:前一篇博客,我们做完了L-Softmax的准备工作.而这一章,我们开始进行前馈的研究. 小喵博客: http://miaoerduo.com 博客原文:  http://www.miao ...

  7. 基于Caffe的Large Margin Softmax Loss的实现（上）

    小喵的唠叨话:在写完上一次的博客之后,已经过去了2个月的时间,小喵在此期间,做了大量的实验工作,最终在使用的DeepID2的方法之后,取得了很不错的结果.这次呢,主要讲述一个比较新的论文中的方法,L- ...

  8. 由css reset想到的深入理解margin及em的含义

    由css reset想到的深入理解margin及em的含义 原文地址:http://www.ymblog.net/content_189.html 经常看到这样语句,*{ margin:0px;pad ...

  9. 探究负边距（negative margin）原理

    W3C规范在介绍margin时有这样一句话: Negative values for margin properties are allowed, but there may be implement ...

  10. overflow:hidden与margin:0 auto之间的冲突

    相对于父容器水平居中的代码margin:0 auto与overflow:hidden之间存在冲突.当这两个属性同时应用在一个DIV上时,在chrome浏览器中将无法居中.至于为啥我也不明白.

随机推荐

  1. AssertValid函数学�

    转自http://tsitao.blog.163.com/blog/static/29795822006914105840496/ VC的调试中,AssertValid和Dump函数的应用 CObje ...

  2. 怎样将Emoj表情插入mysql5.6数据库__python+mysqldb

    废话不多说,相信看到这里的看客已经看过非常多配置文件的设置方法.可是问题还是没有解决.本文就具体记录一下我的解决方法吧. 我的环境:mysql5.6+python2.7.3+MySQLdb1.2.4 ...

  3. GoldentGate Oracle to Oracle 初始化具体解释

    一.安装GoldenGate[源端,目标端] 1.创建ogg文件夹 [root@source ~]# mkdir /DBSoft/ogg [root@source ~]# cd /DBSoft/ogg ...

  4. SilkTest Q&A 10

    92. 如何把单个表达式分两行来写? 答案1: 使用Shift + Enter 答案2: 很容易在online help里面找到答案: 1)      line break in code 2)    ...

  5. Swift - 数字格式化转成字符串（保留两位小数）

    1,下面是一个浮点类型的数字转成String字符串的例子 1 2 var f = 123.32342342 var s:String = "\(f)" //123.32342342 ...

  6. Eclipse在点击运行后不能自动保存的解决

    今天在eclipse上写程序调试时,发现当我点击运行按键之后,并不能在运行前帮我自动保存,也就是说每次修改代码之后, 运行的还是前一次运行之前的代码,并不是修改之后的代码,因此通过在网上搜索解决方案之 ...

  7. 动态修改PE文件图标（使用UpdateResource API函数）

    PE文件的图标存储在资源文件中,而操作资源要用到的API函数就是UpdateResource首先我们需要先了解一下ICO格式,参考资料:http://www.moon-soft.com/program ...

  8. jsonp和事件发布监听

    模拟jsonp var id = 0; function JSONP(url,param,cb){ var callbackName = "json_" + id++; var a ...

  9. C 编程最佳实践（书写风格）

    简介本文是为了满足开发人员的需要而写的.我们总结了一套指南,无论作为开发人员还是顾问,这些指南多年来一直都很好地指导着我们,我们把它们作为建议提供给您,希望对您的工作有所帮助.您也许不赞同其中的某些指 ...

  10. 获取Exe文件版本信息的函数（使用GetFileVersionInfo得到TFileVersionInfo结构体，包含12项内容）

    Type   TFileVersionInfo   =   Record         FixedInfo:TVSFixedFileInfo;         {版本信息}         Comp ...