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. Vue子父组件方法互调

    讲干货,不啰嗦,大家在做vue开发过程中经常遇到父组件需要调用子组件方法或者子组件需要调用父组件的方法的情况,现做一下总结,希望对大家有所帮助. 父组件调用子组件方法: 1.设置子组件的ref,父组件 ...

  2. 如何将Chrome本地安装的扩展应用导出到本地

    有时由于种种原因,我们不能直接使用Chrome web store进行Chrome扩展应用的安装,这时可以让一位已经安装了某Chrome扩展应用的朋友将他的应用导出到本地成为.crx文件,然后发给你, ...

  3. Android 连接.net WebService 工具类代码

    安卓代码: import android.os.Handler;import android.os.Message; import org.ksoap2.SoapEnvelope;import org ...

  4. MYSQL查询练习 1

    -- 查询练习 1------------ CREATE TABLE stu ( sid ), sname ), age INT, gender ) ); , 'male'); , 'female') ...

  5. nginx搭建反向代理服务器详解

    一.反向代理:Web服务器的“经纪人” 1.1 反向代理初印象 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从 ...

  6. 【CPU】记录当前嵌入式设备CPU 比较最高CPU 并打印出来

    1.测试CPU,最高CPU,最低CPU,平均CPU,单个进程如wlan的CPU占比,脚本后面接的第一个参数是要打印cpu的次数,第二个是sleep多久,第三个参数是记录当前数据的路径path #!/b ...

  7. Java多维数组定义以及常见异常

    import java.lang.*; import java.util.*; public class Demo1 { public static void main(String args[]){ ...

  8. 【产品对比】Word开发工具Aspose.Words和Spire.Doc性能和优劣对比一览

    转:evget.com/article/2018/4/3/27885.html 概述:Microsoft Office Word是微软公司的一个文字处理器应用程序,作为办公软件必不可少的神器之一,Wo ...

  9. js 正则表达式将 p标签替换 span标签

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. FastDFS+Nginx+Module

    1.安装libevent wget  https://cloud.github.com/downloads/libevent/libevent/libevent-2.0.21-stable.tar.g ...