一个关于css中margin-right没有效果的问题
在做网页的时候,常常会遇到这样那样的问题,虽然都不是大问题,可以百度解决,但为了以后方便寻找解决问题以及加深记忆,之前的很多解决方案或资料都放在电脑作为笔记,很久没敲代码突然又上手就觉得之前存放的资源都好像找不到了,很散乱,于是现在开始用文章储存~
转载自:http://www.jb51.net/css/173943.html
今天在群里面,有人抛出了一个关于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属性。
一个关于css中margin-right没有效果的问题相关推荐
- html怎么设置左偏移量,CSS中margin属性的偏移量详解(代码示例)
本篇文章给大家介绍一下CSS中margin属性的偏移量,有感兴趣的朋友可以看一看. 话不多说,我们直接进入正题~ 我们先来看一个具体的例子(相关推荐:CSS学习手册) 代码入下:HTML文件和CSS文 ...
- html设置margin无效,CSS中margin不起作用的原因及解决方法
margin是一个属性,指定元素和元素之间的间距,但不能为内联元素指定边距,本篇文章将给大家介绍关于CSS中margin不起作用的原因及解决方法. margin不起作用的原因 对于初学者来说,可能会经 ...
- HTML5中margin属性应用,CSS中margin属性及其使用探究
本文向大家描述一下CSS中margin属性的用法,主要包括其属性,使用过程中会遇到的问题,以及一些高级应用等内容,相信本文介绍一定会让你有所收获. CSS中margin问题及使用 margin属性为C ...
- css margin属性 auto,css中margin:auto属性的使用方法
css中margin:auto属性的使用方法 发布时间:2020-06-25 10:53:17 来源:亿速云 阅读:221 作者:Leah 今天就跟大家聊聊有关css中margin:auto属性的使用 ...
- 在html中设置margin属性,css中margin的4个属性
CSS中:margin:auto与margin: 0 auto;有什么区别 CSS中:margin:auto与margin: 0 auto;有什么区别.有的网站中写的是前者意思不同.margin:au ...
- CSS中margin和padding的区别
padding.margin都是边距的含义,关键问题得明白是什么相对什么的边距.padding是控件的内容相对控件的边缘的边距,margin是控件边缘相对父空间的边距. 在CSS中margin是指从自 ...
- html5中margin是什么意思,css中margin是什么意思,margin作用是什么?
一.介绍,什么意思? margin为对象外边距间隔属性.如果对一个对象比如div设置了边框后,再设置margin就会观察到这个div外面产生了间距边距. margin作用: 设置对象与其它对象的外边距 ...
- 在CSS中实现父选择器效果
为何CSS不支持父选择器? 这个问题的答案和"为何CSS相邻兄弟选择器只支持后面的元素,而不支持前面的兄弟元素?"是一样的. 浏览器解析HTML文档,是从前往后,由外及里的.所以, ...
- html css中margin的用法
css中margin的用法 1.使用auto实现在浏览器水平自动居中 2.margin实现贴边 3.使用margin垂直外边距的合并 示例: 4.margin-top的塌陷问题 1.外部盒子设置一个边 ...
最新文章
- spark(3) - scala独立编程
- 全面分析Web应用程序安全漏洞——《黑客攻防技术宝典:web实战篇》
- GSM/GPRS模块 AT指令集C语言编程——基于有方M660+和MSP430单片机
- spring-使用配置文件完成JdbcTemplate操作数据库
- 数据结构-图的基础代码
- 信息学奥赛一本通(2067:【例2.5】圆)
- MongoDB基本概念和常用操作(二)
- python snmp采集交换机信息_网管交换机与非网管交换机的利弊介绍
- win7倒计时桌面小工具_这些小工具,彻底解放了我的电脑桌面
- C++中数字与字符串之间的转换
- 小白也会用的SQL优化工具推荐
- MySQL常见的几种数据类型盘点
- 2021年将最流行的10大JavaScript库
- Python GUI | 利用Tkinter制作签名设计软件!
- 关于 Windows 桌面图标显示为空白的解决方法
- 这些程序员常用快捷键你了解吗?让你的双手在键盘上起舞
- 使用RDS for MySQL数据库(本地连接、数据库迁移、JDBC操作)
- 硬件电路设计原理图设计
- 运筹学基础【十】 之 盈亏分析模型
- CDN和京东仓库的那些事儿