一个关于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.外部盒子设置一个边 ...
最新文章
- LeetCode(7.整数反转)JAVA
- dts插件 foobar pan baidu_SU插件插件库安装教程
- Java实用教程笔记 类与对象(续)
- 【敏捷个人俱乐部-北京】及【免费敏捷结果线下练习】报名帖
- HarmonyOS之基础环境和应用开发流程
- 图论 —— 生成树 —— 最小瓶颈生成树
- 【HTML+CSS网页设计与布局 从入门到精通】第6章-标题h1,h1字体格式的设置方式
- 纸片人活了!海报上的梅西、漫画里的悟空,都被AI唤醒
- Apache Rewrite 理解
- EIA/TIA布线标准(568A、568B)
- 平时收集的一些有关UED的团队和个人博客
- 软件项目管理思维导图(转载)
- 中规中矩的linux安装redis
- upupoo启动不了 mysql_【upupoo动态桌面壁纸和mysql-jdbc.jar哪个好用】upupoo动态桌面壁纸和mysql-jdbc.jar对比-ZOL下载...
- Docker复习07——Docker 网络
- PLDA宣布XpressLINK-SOC™ CXL控制器IP支持AMBA CXS Issue B协议
- apollo 高精地图解析
- LaTex - PPT 换页动态效果(亲测有效)
- 利用虚拟机配置SDN网络实验平台(virtual box+Ubuntu+jdk配置+mininet+floodlight/openDaylight)
- 基于ThinkPHP6的网站后台管理系统