先看一下vertical-align在W3C当中的值有哪一些：

可是它有数值这一说确实很少提起，我们来看这么一段代码：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    .test_box {

      width: 45%;

      float: left;

      margin-right: 1%;

      background-color: #f0f3f9;

    }

    .mb-200 {

      margin-bottom: -200px;

    }

    .va-200 {

      vertical-align: -200px;

    }

  </style>

</head>

<body>

<div class="test_box">

  <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" class="mb-200" />张含韵

</div>

<div class="test_box">

  <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" class="va-200" />张含韵

</div>

</body>

</html>

　　这里我写了两个div。里面都是包含了同样的img,box是完全脱离文本流的，大小全靠子元素来撑开，那显示的效果是怎样的呢？

vertical-align会增加容器的高度，而margin-bottom负值则是减小！

vertical-align负值和margin-bottom负值的区别的更多相关文章

  1. margin为负值的几种情况

    1.margin-top为负值像素 margin-top为负值像素,偏移值相对于自身,其后元素受影响,见如下代码: 1 <!DOCTYPE html> 2 <html lang=&q ...

  2. What is Vertical Align?

    https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...

  3. 【margin和padding的区别】

    margin和padding的区别 margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.(外边距) padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离.(内 ...

  4. CSS中margin和padding的区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...

  5. margin和padding的区别和用法

    margin和padding的区别和用法 什么是margin.padding? marigin:就是外边距.padding:就是内边距.怎么就容易记住两者呢? 马蓉大家都知道吧,给王宝强带帽子的那位, ...

  6. 两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高

    代码: 效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/ ...

  7. CSS 关于IE6 margin 为负数 负值的时候 正常显示的方法

    一定要加position: relative; 有时候比如margin-left的负数,还需要加上如 float:left 属性.

  8. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  9. 浏览器兼容CSS代码：按钮文字垂直居中(input button text vertical align)

    经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...

  10. 关于Vertical Align的理解

    1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...

随机推荐

  1. html5标签video（播放器）学习笔记（二）-基本操作

    html5标签video(播放器)学习笔记(二)-基本操作 subying 发布时间: 2014/12/01 23:59 阅读: 13008 收藏: 21 点赞: 3 评论: 0 摘要 本文介绍了ht ...

  2. nginx 405 not allowed问题的解决

    转载自:  http://www.linuxidc.com/Linux/2012-07/66761.htm Apache.IIS.Nginx等绝大多数web服务器,都不允许静态文件响应POST请求,否 ...

  3. OFFLINE

    2013年9月22日 20:47:42 OFFLINE 今天没有网络,或许,只有没有网络才去做一些更加有意义的事情.人就是这么贱,不是么.或许已经有点强迫症的味道的了. 中午吃完饭有2个小时的休息时间 ...

  4. 【Unity】动态调用其他脚本的函数

    本文转载自:http://blog.csdn.net/smilingeyes/article/details/17767269 第一种,被调用脚本函数为static类型,调用时直接用 脚本名.函数名( ...

  5. C语言 · 贪心算法

    发现蓝桥杯上好多题目涉及到贪心,决定学一学. 贪心算法是指在对问题求解时,总是做出在当前看来是最好的选择.也就是说:不从整体最优上考虑,而是在某种意义上的局部最优解.其关键是贪心策略的选择,选择的贪心 ...

  6. C语言 · 芯片测试

    基础练习 芯片测试   时间限制:1.0s   内存限制:512.0MB    问题描述 有n(2≤n≤20)块芯片,有好有坏,已知好芯片比坏芯片多. 每个芯片都能用来测试其他芯片.用好芯片测试其他芯 ...

  7. http://blog.csdn.net/ce123_zhouwei/article/details/7364294

    http://blog.csdn.net/ce123_zhouwei/article/details/7364294

  8. Entity Framework应用：管理并发

    理解并发 并发管理解决的是允许多个实体同时更新,实际上这意味着允许多个用户同时在相同的数据上执行多个数据库操作.并发是在一个数据库上管理多个操作的一种方式,同时遵守了数据库操作的ACID属性(原子性. ...

  9. Jquery 技术小结

    前记: 现在项目中经常要用到JS去操作一些事,对整个团队开发来说,JS的书写规范和正确对开发具有较大的帮助.在一个团队中常常会发生JS书写的不统一性和游览器不兼容性等情况发生.我觉的最好的方法就是有一 ...

  10. 关于Cocos2d-x节点和精灵节点的坐标、位置以及大小的设置

    1.cocos2d-X中的坐标(0,0),就是运行框的左下角位置,所以运行框看起来就是一个第一象限. 2.节点的锚点就是我们setPosition所设定的位置,默认锚点是在节点的中心,也就是setPo ...