今天在群里面，有人抛出了一个关于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. OSI七层模型基础知识及各层常见应用

       OSI Open Source Initiative(简称OSI,有译作开放源代码促进会.开放原始码组织)是一个旨在推动开源软件发展的非盈利组织.OSI参考模型(OSI/RM)的全称是开放系统互 ...

  2. python 下载整个站点

    用python实现的下载整个站点工具. 核心流程非常easy: 1. 输入站点地址 2. url.得到响应的内容. 3. 依据响应的http报文头,假设类型为html, 则从第4步開始运行. 假设是其 ...

  3. Swift - 做一个简单的无线U盘（手机端Http服务器搭建）

    由于iOS系统的封闭性,在数据传输方面十分不方便.不像安卓设备,直接连接电脑就能当U盘使用.所以一般我们如果用iPhone临时存取个东西,要么使用数据线连接iTunes,要么手机电脑都登上QQ,使用Q ...

  4. 腾讯公司数据分析岗位的hadoop工作　线性回归　k-means算法　朴素贝叶斯算法　SpringMVC组件　某公司的广告投放系统　KNN算法　社交网络模型　SpringMVC注解方式

    腾讯公司数据分析岗位的hadoop工作 线性回归 k-means算法 朴素贝叶斯算法 SpringMVC组件 某公司的广告投放系统 KNN算法 社交网络模型 SpringMVC注解方式 某移动公司实时 ...

  5. .htaccess和license文件编写

    1 .htaccess 1.1 文件的位置 默认情况下放置于根目录 1.2 .htaccess文件的编写 1.2.1 错误页面跳转 ErrorDocument + 错误码 + 跳转路径/提示文字 eg ...

  6. HTML5开发桌面应用：选择node-webkit还是有道heX

    近几年,移动应用和web2.0大行其道,相比之下.传统桌面应用程序开发显得相对冷清(包含该领域技术人才的后继力量),但在一些场景下,它依旧有其不可替代的优势. 将HTML5和Node.JS的技术优势. ...

  7. 【ASP.NET Web API教程】4.2 路由与动作选择

    原文:[ASP.NET Web API教程]4.2 路由与动作选择 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本系列教程,请先看前面的内容. 4.2 Routing ...

  8. gap锁 对于unique index 和Ununique index

    Session 1: mysql> select * from s100; +-----+------+------+ | sn | id | info | +-----+------+---- ...

  9. 求刷Kindle Fire HD的方法

    前几天入手了台Amazon Kindle Fire HD 其系统是经过Amazon尝试改造过的Android,用起来很不爽,想刷个CM10之类的,求教程和工具.

  10. iOS - NSLog的使用方法

    NSLog的定义 NSLog定义在NSObjCRuntime.h中,如下所示: void NSLog(NSString *format, …); 基本上,NSLog很像printf,同样会在conso ...