今天在群里面，有人抛出了一个关于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. Oracle左连接、右连接示例

    建表: create table a ( id ), name ) ); create table b ( name ), age ) ); create table c ( name ), dept ...

  2. 使用mex进行混合编程的一些注意事项

    1.mxGetPr的使用: Use mxGetPr on arrays of type double only. Use mxIsDouble to validate the mxArray type ...

  3. ios23- 文件下载（同步和异步）

    1.第一步:创建一个单例视图 #import <UIKit/UIKit.h> @interface ios23_downViewController : UIViewController& ...

  4. hdu3986Harry Potter and the Final Battle

    给你一个无向图,然后找出当中的最短路, 除去最短路中的随意一条边,看最糟糕的情况下, 新的图中,第一个点到末点的最短路长度是多少. 我的做法是: 首先找出最短路,然后记录路径, 再一条一条边的删, 删 ...

  5. 让工程师爱上CMM，实现管理于无形 --- 中标软件CMMI L5之路 （2/2）

    上节:见 http://blog.csdn.net/sztiger168/article/details/9142069 使用 青铜器RDM在2011年正式在中标软件上线,将研发业务全面流程化,完全支 ...

  6. qt事件传递过程和处理

    处理监控系统的时候遇到问题,在MainWidget中创建多个子Widget的时候,原意是想鼠标点击先让MainWidget截获处理后再分派给子Widget去处理,但调试后发现如果子Widget重新实现 ...

  7. 14.6.2 Moving or Copying InnoDB Tables to Another Machine 移动或者copy InnoDB 表到另外的机器

    14.6.2 Moving or Copying InnoDB Tables to Another Machine 移动或者copy InnoDB 表到另外的机器 这个章节描述技术关于移动或者copy ...

  8. javascript实现图片无缝滚动（scrollLeft的使用方法介绍）

    <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" conten ...

  9. JSP的include指令

    JSP的include 指令:向当前页面中插入的一个静态文件的内容. 在test5.jsp里面 <%@ include file="test5_1.jsp" %> 新建 ...

  10. Qt之VLFeat SLIC超像素分割(Cpp版)

    源地址:http://yongyuan.name/blog/vlfeat-slic-with-qt.html 近段时间学了点Qt,恰好前段时间用借助VLfeat以及OpenCV捣鼓了SLIC超像素分割 ...