先看一下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. sql插入数据

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. LINQ操作符二：SelectMany

    SelectMany操作符提供了将多个from子句组合起来的功能,相当于数据库中的多表连接查询,它将每个对象的结果合并成单个序列. 示例: student类: using System; using ...

  3. Cracking the coding interview--Q2.5

    题目 原文: Given a circular linked list, implement an algorithm which returns node at the beginning of t ...

  4. 关于树莓派 BOOBS 安装之后的初级操作

    以安装OpenCV 3.1.0为例 上一篇我们利用Raspberry 官方提供的工具 BOOBS安装了Raspbian 操作系统,下面让我们看一下如何简单的配置raspbian操作系统. 从树莓派官方 ...

  5. Deep Reinforcement Learning from Self-Play in Imperfect-Information Games

    Heinrich, Johannes, and David Silver. "Deep reinforcement learning from self-play in imperfect- ...

  6. Mastering the game of Go with deep neural networks and tree search浅析

    Silver, David, et al. "Mastering the game of Go with deep neural networks and tree search." ...

  7. Intellij IDEA 使用学习

    Intellij中名词解释: Project,就是一个完整的项目,类似Eclipse中的WorkSet(虽然WorkSet是人为归类的). Module,是Project中的模块,类似Eclipse中 ...

  8. bootstrap -- css -- 图片

    图片样式 .img-rounded:添加 border-radius:6px 来获得图片圆角 .img-circle:添加 border-radius:500px 来让整个图片变成圆形. img-ci ...

  9. 基础控制器MVC ,全局判断

    public class BaseController : Controller    {        //        // GET: /Base/ protected override voi ...

  10. php 错误和异常处理

    一.错误和异常处理 1.1 错误类型和基本的调试方法 PHP程序的错误发生一般归属于下列三个领域: 语法错误: 语法错误最常见,并且也容易修复.如:代码中遗漏一个分号.这类错误会阻止脚本的执行. 运行 ...