How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?

解答

 

Negative margins are valid in css and understanding their (compliant) behaviour is mainly based on the box model and margin collapsing. While certain scenarios are more complex, a lot of common mistakes can be avoided after studying the spec.

For instance, rendering of your sample code is guided by the css spec as described in calculating heights and margins for absolutely positioned non-replaced elements.

If I were to make a graphical representation, I'd probably go with something like this (not to scale):

The margin box lost 8px on the top, however this does not affect the content & padding boxes. Because your element is absolutely positioned, moving the element 8px up does not cause any further disturbance to the layout; with static in-flow content that's not always the case.

Bonus:

Still need convincing that reading specs is the way to go (as opposed to articles like this)? I see you're trying to vertically center the element, so why do you have to set margin-top:-8px; and not margin-top:-50%;?

Well, vertical centering in CSS is harder than it should be. When setting even top or bottom margins in %, the value is calculated as a percentage always relative to the width of the containing block. This is rather a common pitfall and the quirk is rarely described outside of w3 docos

How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?的更多相关文章

  1. jsp学习---css基础知识学习,float,position,padding,div,margin

    1.常用页面布局 效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  2. css设置时父元素随子元素margin值移动

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div ...

  3. css使既有浮动又有左右margin的多个元素两端对其

    两端对齐效果 如上图中红色的9个div它们中间有间距,而最左边和最右边是没有间距的,这种布局如果使用css3的flex来实现是非常简单的,而如果要使用float布局就需要一些特殊的技巧了. 实现原理 ...

  4. CSS skills: 6) auto hide the top bar javascript

    //jquery $(document).ready(function(){ $(window).scroll(function() { $(this).scrollTop() > 10 ? $ ...

  5. 每天CSS学习之top/left/right/bottom

    top:值域是数值或百分比,正负都可以.该值表示 距离顶部有多少像素.例如top:10px:即距离顶部10个像素. left/right/bottom与top如出一辙,只是方向不一样而已. 这些属性一 ...

  6. CSS解决ul下面最后一个li的margin

    1.运用css3的nth-child(3n): <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  7. 【转】CSS之Background-Position left right center top bottom属性

    background-position:left top; 背景图片的左上角和容器(container)的左上角对齐,超出的部分隐藏. 等同于 background-position:0,0; 也等同 ...

  8. 如何用CSS快速布局（一）—— 布局元素详细

    要快速进行网页排版布局,则必须对布局的元素有清晰的了解,才不会总是在细节处出错.这一篇先详解有关布局的因素作为布局基础:块级元素and内联元素.盒模型.准确定位.元素对齐.样式继承.下一篇则重点描述快 ...

  9. CSS小全

    CSS 的使用 内联(inline style attribute) 完全不应该这样做 <head> 标签内的 <style> 标签 偶尔可以用 <link> 标签 ...

随机推荐

  1. JavaScript指定日期格式化

    formatDataToString:function (dates, formats) { var o = { "M+": dates.getMonth() + 1, //月份 ...

  2. Async await 解析

    Async 定义:使异步函数以同步函数的形式书写(Generator函数语法糖) 原理:将Generator函数和自动执行器spawn包装在一个函数里 形式:将Generator函数的*替换成asyn ...

  3. keil 选项卡设置

    *1.optimization  : level2. *2. 2)硬件目标设置选项卡(Target),见图6所示. 图6 1:选择硬件目标设置选项卡 2:指定用于的晶振频率 3:在应用中可以选择实时操 ...

  4. rsync & sersync 实时同步

    1.根据之前一篇关于rsync的随笔部署好rsync服务后,可以开始inotify的部署 2.sersync的部署 ①.部署服务(安装和配置过程) #Master 部署Sersync服务 mkdir ...

  5. NginX——配置负载均衡

    A.            在http模块加上upstream配置 upstream www.myweb.com { server  127.0.0.1:9100 weight=3; server  ...

  6. PHP中将二维数组 转换成字符串

    function arr_to_str($arr) { $t ='' ; foreach ($arr as $v) { $v = join(",",$v); // 可以用implo ...

  7. nginx用指针的值的最后一位来判断过期事件

    nginx中,将地址的最后一位取出来,用Instace变量标识,用来判断是否连接已经被释放成为过期时间 为什么指针地址最后一位一定是0呢? 这里的内存地址,一定是内存分配器分配出来的地址,如new . ...

  8. golang中fmt的'占位符'使用

    golang 的fmt 包实现了格式化I/O函数,类似于C的 printf 和 scanf. # 定义示例类型和变量 type Human struct { Name string } var peo ...

  9. [转载]Appium工作原理

    [Appium]Appium工作原理 2017-09-13 15:28 sophia194910 阅读(7658) 评论(0) 编辑 收藏 参考:http://www.cnblogs.com/zhjs ...

  10. IIS设置网站为HTTPS并且将HTTP重定向到HTTPS

    第一步:下载证书,导入证书到IIS https://help.aliyun.com/knowledge_detail/95502.html 站点绑定https 第二部:安装URL重写模块 rewrit ...