先看一下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. 【技术】正則表達式—匹配电话号码，网址链接，Email地址

    #pragma mark - 正则匹配电话号码.网址链接.Email地址 + (NSMutableArray *)addHttpArr:(NSString *)text { //匹配网址链接 NSSt ...

  2. maven 打包如何将依赖打进来

    阿斯蒂芬 <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupI ...

  3. win10计算机打开不要是“快速访问”功能？

    win10的文件夹选项中---常规--最上端调整

  4. golang第三方日志包seelog配置文件详解

    开发任何项目,都离不开日志,配好自己的项目日志输出,往往是开发项目的前提.在golang中,seelog应该是比较有名的日志处理包了,功能非常强大,seelog官方文档 一.seelog主要功能下面我 ...

  5. IXWebHosting主机如何退款中文图解教程

    http://www.chinaz.com/web/2011/0630/192654.shtml ——————————————————————————————————————————————————— ...

  6. PHP程序员的10个有用的技巧和教程

    PHP被定义为一个通用的服务器端脚本语言,它基本上是专为Web开发的重要目的.借助PHP可以创建动态和惊人的网页效果,他是被嵌入在一个HTML源文件的服务器端的脚本语言之一.因此,它成为最流行的,也是 ...

  7. Laravel Debugbar

    Installation Require this package with composer: composer require barryvdh/laravel-debugbar After up ...

  8. 下载安装 Apache（Windows 64位）

    32位的Apache的下载安装:http://jingyan.baidu.com/album/2f9b480dae458f41cb6cc2ce.html?picindex=2 64位的Apache的下 ...

  9. python 两个字典合并

    dict1={1:[1,11,111],2:[2,22,222]}dict2={3:[3,33,333],4:[4,44,444]}合并两个字典得到类似 {1:[1,11,111],2:[2,22,2 ...

  10. Android ListView 笔记

    ListView以列表的形式展示数据内容. 布局文件如下所示,添加一个ListView. activity_main.xml <?xml version="1.0" enco ...