block的高度是从最上面撑开的

那么inline-block呢？

直接上代码

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6.     #test {
  7.         line-height: 0;
  8.         font-size: 80px;
  9.         background-color: gray;
  10.     }
  11.     #test span {
  12.         display: inline-block;
  13.         background-color: red;
  14.         height: 1px;
  15.         width: 150px;
  16.     }
  17.     #s1 {
  18.  
  19.     }
  20.     #s2 {
  21.         line-height: 1;
  22.     }
  23. </style>
  24. </head>
  25.  
  26. <body>
  27. <div style="height: 100px;"></div>
  28. <div id="test">
  29.     <span id="s0"></span>
  30.     <span id="s1">33</span>
  31.     <span id="s2">33</span>
  32. </div>
  33. </body>
  34. </html>

看到没？3个inline-block的撑开位置是不一样的。

同时把他们的父元素撑开了。

把3个inline-block高度加高试试

  1. #test span {
  2.         display: inline-block;
  3.         background-color: red;
  4.         height: 10px;
  5.         width: 150px;
  6.     }

撑开方向也不一样。

把span换成button试一试

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6.     #test {
  7.         line-height: 0;
  8.         font-size: 80px;
  9.         background-color: gray;
  10.     }
  11.     #test button {
  12.         //display: inline-block;
  13.         line-height: 0;
  14.         font-size: 80px;
  15.         background-color: red;
  16.         height: 1px;
  17.         width: 150px;
  18.     }
  19.     #s1 {
  20.  
  21.     }
  22.     #s2 {
  23.         line-height: 1 !important;
  24.     }
  25. </style>
  26. </head>
  27.  
  28. <body>
  29. <div style="height: 100px;"></div>
  30. <div id="test">
  31.     <button id="s0"></button>
  32.     <button id="s1">33</button>
  33.     <button id="s2">33</button>
  34. </div>
  35. </body>
  36. </html>

height是1的时候跟span差不多的表现

增加height之后：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6.     #test {
  7.         line-height: 0;
  8.         font-size: 80px;
  9.         background-color: gray;
  10.     }
  11.     #test button {
  12.         //display: inline-block;
  13.         line-height: 0;
  14.         font-size: 80px;
  15.         background-color: red;
  16.         height: 30px;
  17.         width: 150px;
  18.     }
  19.     #s1 {
  20.  
  21.     }
  22.     #s2 {
  23.         line-height: 1 !important;
  24.     }
  25. </style>
  26. </head>
  27.  
  28. <body>
  29. <div style="height: 100px;"></div>
  30. <div id="test">
  31.     <button id="s0"></button>
  32.     <button id="s1">33</button>
  33.     <button id="s2">33</button>
  34. </div>
  35. </body>
  36. </html>

中间元素的撑开方向与span不一样了

inline-block容器的高度撑开位置的更多相关文章

  1. inline,block,inline-block的区别

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

  2. inline, block, and inline-block

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  3. css 元素的竖向百分比设定是相对于容器的高度吗？

    结论是,如果是height的话,是相对于容器高度,如果是padding-height,margin-height则是相对于容器的宽度. 举例说明: <!DOCTYPE html> < ...

  4. js,jquery 获取滚动条高度和位置, 元素距顶部距离

    一,获取滚动条高度和位置 jQuery 获取览器显示区域的高度: $(window).height();  获取浏览器显示区域的宽度:$(window).width(); 获取页面的文档高度:$(do ...

  5. 深入浅出－iOS Block原理和内存中位置

    Posted by 微博@Yangsc_o 原创文章,版权声明:自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0 #简介 今天回顾一下blcok,基本 ...

  6. inline-block,inline,block,table-cell,float

    float:left ---------------------------------------------------------------------------------------- ...

  7. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  8. inline,block,inline-block解析

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  9. 块状元素和内联元素 【inline block】

    // 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...

随机推荐

  1. STL删除vector或list的方法及注意的问题

    删除vector中的元素 1.删除指定的所有对象 STL中remove()只是将待删除元素之后的元素移动到vector的前端,而不是删除.若要真正移除,需要搭配使用erase().例子: vector ...

  2. java学习笔记(13) —— google GSON 实现json转化方法

    1.配置struts.xml <action name="getGsonAction" class="com.test.action.json.GetGsonAct ...

  3. ubuntu 14.0 下github 配置

    一:创建Repositories 1:首先在github下创建一个帐号.这个不用多说,然后创建一个Repositories. 2:然后在ubuntu下安装git相关的东东: 1 sudo apt-ge ...

  4. Spark学习笔记--Graphx

    浅谈Graphx: http://blog.csdn.net/shangwen_/article/details/38645601 Pregel: http://blog.csdn.net/shang ...

  5. mysql巡检脚本

    #!/usr/bin/env python3.5 import psutil import mysql.connector import argparse import json import dat ...

  6. linux常用命令(5)rmdir命令

    rmdir是常用的命令,该命令的功能是删除空目录,一个目录被删除之前必须是空的.(注意,rm - r dir命令可代替rmdir,但是有很大危险性.)删除某目录时也必须具有对父目录的写权限.1．命令格 ...

  7. Keil C51对同一端口的连续读取方法

    C语言是当前举世公认的高效简洁而又非常贴近硬件的编程语言之一.将C语言向单片机MCS-51上的移植始于2O世纪8O年代的中后期,经过近1O年的发展,C语言克服了产生代码过长.运行速度较慢的缺点,并且由 ...

  8. 模糊语意变数、规则和模糊运算--AForge.NET框架的使用（二）

    原文:模糊语意变数.规则和模糊运算--AForge.NET框架的使用(二) 语意变数(Linguistic Variable) 语意变数存储了数个语意量(标签),每个语意量包含一个识别名和模糊集合.在 ...

  9. 如何获取drawable目录下的图片绝对路径

    Uri uri = Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE + "://" + r.getResourcePackage ...

  10. Windows登录脚本可以限制并发登录吗

    在Windows服务器中,使用一个Windows登录脚本来限制并发会话靠谱吗? 事实上,这种解决方案存在很多缺点和弱点,并不能满足大中型IT基础设施的安全性需求. 一.使用登陆脚本限制并发会话,恶意用 ...