先看一下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. ffmpeg 批量转换swf为mp3

    下了几个音乐居然都是swf格式,在网上找了一下没找到好用的转换工具,于是想到了ffmpeg. linux下可以直接安装ffmpeg #/bin/sh for f in *.swf do ffmpeg ...

  2. cmder小技巧

    1.修改config下的aliases文件,可以添加别名 $* 表示所有参数,$i 表示第几个参数 比如cd cd=cd /d $* 这样window下的cd就可以直接切换盘符+路径了. 有用的别名 ...

  3. POST请求中，往URL传递数组

    POST请求中,前端/客户端需要手动拼接URL,然后走接口跟后端交互. 若想传递数组,可以按照如下的拼接形式: &materialsTypeId=11&materialsTypeId= ...

  4. C语言 · 友好数

    算法训练 友好数   时间限制:1.0s   内存限制:256.0MB      问题描述 有两个整数,如果每个整数的约数和(除了它本身以外)等于对方,我们就称这对数是友好的.例如: 9的约数和有:1 ...

  5. nand ECC 算法记录

    nandflash ECC 原理记录. nand ECC 全称是Error Checking and correction. 该算法分为列校验和行校验. 列校验有下图所示: * 如上图所示, CP0 ...

  6. linux_UAPI_转

    转自:Linux Kernel UAPI 问题描述 从3.5开始,Linux Kernel 里多了一个 uapi 文件夹,里面放了很多 Linux Kernel 各个模块的头文件.如果是第一次碰到,可 ...

  7. NFS根文件系统

    按照以前文档可以正确制作根文件系统,并且开发板可正确nfs挂测主机目录. 现只需修改bootargs,使内核启动时挂测文件系统即可.setenv bootargs mem=64M console=tt ...

  8. 深入理解MongoDB的复合索引

    更新时间:2018年03月26日 10:17:37   作者:Fundebug    我要评论 对于MongoDB的多键查询,创建复合索引可以有效提高性能.这篇文章主要给大家介绍了关于MongoDB复 ...

  9. Java 获取webapp，Root，classpath，项目等路径工具类

    public class UtilPath { public static void main(String[] args) { String systemName = System.getPrope ...

  10. select文本框架（change事件）改变另外一个select的值

    $('select[name=adults]').bind('change', function() { var $value = $(this).val(); if ($value >= 1) ...