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. oracle exists和 not exists 的用法

    比如 a,b 关联列为 a.id = b.id,现在要取 a 中的数据,其中id在b中也存在: select * from a where exists(select 1 from b where b ...

  2. MySQL数据库的启动与停止

    有时候我们在任务管理器中无意识的结束了数据库的程序,再用可视化工具连接 时就会显示NO CONNECTION的情况,这样就需要重启数据库服务. 1. 我的电脑右键->管理->服务和应用程序 ...

  3. 1.volatile关键字 内存可见性

    Java JUC 简介 在 Java 5.0 提供了 java.util.concurrent (简称JUC )包,在此包中增加了在并发编程中很常用的实用工具类,用于定义类似于线程的自定义子系统,包括 ...

  4. vccode配置c++ 编译环境

    https://blog.csdn.net/qq_43041976/article/details/88544632 https://www.cnblogs.com/bpf-1024/p/115970 ...

  5. 今天把自己的ocr镜像开源了

    docker pull docker.io/zhangbo2008/ocr_docker_byzhang:v1 即可,欢迎下载

  6. 2019牛客多校第五场 generator 1——广义斐波那契循环节&&矩阵快速幂

    理论部分 二次剩余 在数论中,整数 $X$ 对整数 $p$ 的二次剩余是指 $X^2$ 除以 $p$ 的余数. 当存在某个 $X$,使得式子 $X^2 \equiv d(mod \ p)$ 成立时,称 ...

  7. EF 多表联查方法

    两个表的linq         private DataContext dc; dc = new DataContext(); var heji = (from da in dc.q1        ...

  8. learning express step(四)

    learning express route function const express = require('express'); const app = express(); app.get(' ...

  9. 51nod 1086

    https://www.cnblogs.com/TnT2333333/p/6879709.html 二进制优化多重背包 怎么用二进制优化多重背包,举一个例子就明白了. 如果要放n个苹果,可以将n个苹果 ...

  10. locale与C字符编码

    ref: https://www.cnblogs.com/gatsby123/p/11150472.html Unicode 字符集 代码点 与编码表中的某个字符对应的代码值.在Unicode标准中, ...