margin表示一个元素的外边距。取值为正值时,表示相对于正常流离邻近元素更远,而取负值时,使其更近

但是,设置margin后,四个方向的表现形式不同

自身发生移动:top、left

  • margin-top
<div id="negtive_top">
<div>margin-top: -50px;自身向上移动50px</div>
</div>

CSS

#negtive_top{
background-color: green;
border: 2px solid red;
}
#negtive_top div{
background-color: yellow;
border: 2px solid red;
opacity: 0.5;
margin-top: -50px;
}
 
  • margin-left
<div id="negtive_left">
<div>margin-left: -50px;自身向左移动50px</div>
</div>

CSS

#negtive_left{
background-color: green;
border: 2px solid red;
}
#negtive_left div{
background-color: yellow;
opacity: 0.5;
margin-left: -50px;
border: 2px solid red;
}

邻近元素移动:right、bottom

  • margin-right
<div id="negtive_right">margin-right: -50px;右边的元素向左移动50px</div>
<div></div>

CSS

#negtive_right{
background-color: green;
border: 2px solid red;
float: left;
margin-right: -50px;
}
#negtive_right+div{
background-color: yellow;
opacity: 0.5;
border: 2px solid red;
float: left;
}
  • margin-bottom
<div id="negtive_bottom">margin-bottom: -50px;下方的元素向上移动50px</div>
<div></div>

CSS

#negtive_bottom{
background-color: green;
border: 2px solid red;
margin-bottom: -50px;
}
#negtive_bottom +div{
background-color: yellow;
opacity: 0.5;
border: 2px solid red;
}

参考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin

CSS margin属性取值的更多相关文章

  1. spring+hibernate实体类注解详解(非原创) + cascade属性取值

    @Entity //继承策略.另一个类继承本类,那么本类里的属性应用到另一个类中 @Inheritance(strategy = InheritanceType.JOINED ) @Table(nam ...

  2. jquery通过name属性取值的方法

    jquery通过name属性取值的方法//$("input[name='imgtitle']").val();//这个只能取到第一个的值//通过each函数取得所有input的值v ...

  3. Python:高级主题之(属性取值和赋值过程、属性描述符、装饰器)

    Python:高级主题之(属性取值和赋值过程.属性描述符.装饰器) 背景 学习了Javascript才知道原来属性的取值和赋值操作访问的“位置”可能不同.还有词法作用域这个东西,这也是我学习任何一门语 ...

  4. js动态参数作为Object的属性取值

    js动态参数作为Object的属性取值var myObj = {"a":1,"b":2};var a = 'a';myObj[a] 就可以获取到 属性a的值了

  5. CSS margin 属性

    设置外边距的最简单的方法就是使用 margin 属性. margin 属性接受任何长度单位,可以是像素.英寸.毫米或 em. margin 可以设置为 auto.更常见的做法是为外边距设置长度值.下面 ...

  6. 当padding/margin的取值形式为百分比时。。。。。

    一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说,left/ ...

  7. CSS margin属性与用法教程

    margin 属性是css用于在一个声明中设置所有 margin 属性的简写属性,margin是css控制块级元素之间的距离, 它们之间是透明不可见的. margin属性包含了margin left  ...

  8. CSS display属性的值及作用

    display 的属性值有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|tab ...

  9. Flex 布局的各属性取值解释

    Flex布局是一种弹性布局.布局样式比较灵活,大多数情况下可以替代float,而且不会脱离文档里流. Flex中定义了两个轴线,一个主轴一个副轴,这个概念你可以想想屏幕坐标系(X轴向右,Y轴向下),F ...

随机推荐

  1. TCP时间获取程序

    一.服务器程序 #include <stdio.h> #include <stdlib.h> #include <time.h> #include <sys/ ...

  2. 20155324 2016-2017-2 《Java程序设计》第3周学习总结

    20155324 2016-2017-2 <Java程序设计>第3周学习总结 教材学习内容总结 定义类 要产生对象必须先定义类,类是对象的设计图,对象是类的实例.类定义时使用class关键 ...

  3. 利用PHP实现登录与注册功能以及使用PHP读取mysql数据库——以表格形式显示数据

    登录界面 <body><form action="login1.php" method="post"><div>用户名:&l ...

  4. python前后端加密方式

    后端加密方法: python后端加密方式: # 双重工加密 #bytes((7788).encode('utf-8')):为后端加密二把手,多加的锁,该参数可为空,必须加bytes才能实现 md5pa ...

  5. 剑指Offer题解索引

    数组 数组中重复的数字 二维数组中的查找 构建乘积数组 字符串 替换空格 字符流中第一个不重复的字符 表示数值的字符串 递归和循环 斐波那契数列 跳台阶 变态跳台阶 矩形覆盖 链表 从尾到头打印链表 ...

  6. C 捕获 lua 异常错误

    参考文章https://blog.codingnow.com/2015/05/lua_c_api.html , , )) { printf("file=%s, func=%s, line=% ...

  7. mysql原理~创建用户的那些事情

    一 简介:mysql是如何创建用户的二 基本语法:  1 grant 权限 on db.table to 'user'@'ip' identified by 'password'     目的 创建用 ...

  8. Win10提示无法创建新的分区也找不到现有的分区解法

    原文链接:https://www.pconline.com.cn/win10/1126/11261093.html 1.格式化整个硬盘,重新分区 如果你的硬盘上没有重要数据的话,到了分区这一步时,将硬 ...

  9. C中的malloc/free与C++中的new/delete的用法与区别

    1.先介绍malloc/free的用法: 原型函数: void *malloc(long NumBytes); 该函数分配了NumBytes个字节的内容,分配的空间是堆空间 malloc()根据用户所 ...

  10. CountDownLatch 闭锁、FutureTask、Semaphore信号量、Barrier栅栏

    同步工具类可以是任何一个对象.阻塞队列可以作为同步工具类,其他类型的同步工具类还包括信号量(Semaphore).栅栏(Barrier).以及闭锁(Latch). 所有的同步工具类都包含一些特定的结构 ...