先看一下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. 一款基于jquery的鼠标经过图片列表特效

    今天要给大家推荐一款基于jquery的鼠标经过图片列表特效.当鼠标经过列表图片的时候,图片放大,且有一个半透明的遮罩层随之移动.效果图如下: 在线预览   源码下载 实现的代码 html代码: < ...

  2. php爬虫实践

    之前用nodejs的cheerio来做,不过nodejs的异步回掉太恶心了,受不了. 后来发现了php的htmlpagedom库,类似jquery的选择器语法,而且支持中文. 安装  composer ...

  3. c++犯过的错

    1.可访问性(是否可用).可见性(作用域内是否存在) 2.volatile(嵌入式用的多) const 3.友元函数可以访问类的私有函数 目的 工厂方法 全局运算符 如 >> <&l ...

  4. hive 进阶笔记

    -- mysql方式 create table account_channel(account_ String,channel_ String) as select a.account,b.chann ...

  5. PHP MysqlI操作数据库

    1连接数据库. //procedural style $mysqli = mysqli_connect('host','username','password','database_name'); / ...

  6. 正确配置Linux系统ulimit值的方法

    在Linux下面部署应用的时候,有时候会遇上Socket/File: Can’t open so many files的问题:这个值也会影响服务器的最大并发数,其实Linux是有文件句柄限制的,而且L ...

  7. 轻量级ORM框架Dapper应用五：使用Dapper实现Join操作

    在这篇文章中,讲解如何使用Dapper使用Inner join的操作 1.新创建两张表:Users表和Product表 Users表定义如下: CREATE TABLE [dbo].[Users]( ...

  8. 判断radiobutton是否被选中

    <tr> <td class="label">是否显示:</td> <td> <?php if($cates_data[0][ ...

  9. Qt中delete的问题

    最近项目遇到了一个bug,压力测试ui总会崩溃,gdb调试未果,跑到了库函数,无从查起: (gdb)bt #0 0x4146b1e4 in QWidgetPrivate::drawWidget(QPa ...

  10. 5G的7位电话号码，去重，内存20mb，代码实现。

    转自:http://www.aboutyun.com/thread-11139-1-1.html 答案:首先,这个题考的不是分布式7位数,至少要用int来保存,那么int为4字节,20MB内存 10^ ...