• 技术文章 >web前端 >css教程

    vertical-align负值和margin-bottom负值的差异有哪些?

    青灯夜游青灯夜游2020-11-06 18:00:47转载613
    vertical-align负值和margin-bottom负值的差异有哪些?下面本篇文章给大家介绍一下vertical-align负值和margin-bottom负值的区别。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    先看一下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>
    <p class="test_box">
      <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" class="mb-200" />张含韵
    </p>
    <p class="test_box">
      <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" class="va-200" />张含韵
    </p>
    </body>
    </html>

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

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

    更多编程相关知识,请访问:编程入门!!

    以上就是vertical-align负值和margin-bottom负值的差异有哪些?的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:博客园,如有侵犯,请联系admin@php.cn删除
    上一篇:css如何制作饼状图 下一篇:css可以去掉浮动吗?
    大前端线上培训班

    相关文章推荐

    • css怎么使用外部艺术字• 使用css grid构建复杂布局的小技巧!(值得收藏)• 你知道怎么使用纯css来实现下拉菜单效果么• 你知道怎么利用css实现内凹圆角么• 深入浅析css中的z-index• css实现图片在div中居中的方法有哪些

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网