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

那么inline-block呢？

直接上代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<style>

    #test {

        line-height: 0;

        font-size: 80px;

        background-color: gray;

    }

    #test span {

        display: inline-block;

        background-color: red;

        height: 1px;

        width: 150px;

    }

    #s1 {

    }

    #s2 {

        line-height: 1;

    }

</style>

</head>

<body>

<div style="height: 100px;"></div>

<div id="test">

    <span id="s0"></span>

    <span id="s1">33</span>

    <span id="s2">33</span>

</div>

</body>

</html>

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

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

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

#test span {

        display: inline-block;

        background-color: red;

        height: 10px;

        width: 150px;

    }

撑开方向也不一样。

把span换成button试一试

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<style>

    #test {

        line-height: 0;

        font-size: 80px;

        background-color: gray;

    }

    #test button {

        //display: inline-block;

        line-height: 0;

        font-size: 80px;

        background-color: red;

        height: 1px;

        width: 150px;

    }

    #s1 {

    }

    #s2 {

        line-height: 1 !important;

    }

</style>

</head>

<body>

<div style="height: 100px;"></div>

<div id="test">

    <button id="s0"></button>

    <button id="s1">33</button>

    <button id="s2">33</button>

</div>

</body>

</html>

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

增加height之后：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<style>

    #test {

        line-height: 0;

        font-size: 80px;

        background-color: gray;

    }

    #test button {

        //display: inline-block;

        line-height: 0;

        font-size: 80px;

        background-color: red;

        height: 30px;

        width: 150px;

    }

    #s1 {

    }

    #s2 {

        line-height: 1 !important;

    }

</style>

</head>

<body>

<div style="height: 100px;"></div>

<div id="test">

    <button id="s0"></button>

    <button id="s1">33</button>

    <button id="s2">33</button>

</div>

</body>

</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. JDBC使用sql语句

    JDBC---连接数据库 java与数据库连接需要驱动,这个驱动则是JDBC,连接的时候需要ip+端口号+dbname 还要用户名和密码 改java文件的编码方式--在项目名点右键属性----把编码方 ...

  2. 武汉科技大学ACM ：1004: 零起点学算法74——Palindromes _easy version

    Problem Description “回文串”是一个正读和反读都一样的字符串,比如“level”或者“noon”等等就是回文串.请写一个程序判断读入的字符串是否是“回文”. Input 输入包含多 ...

  3. 使用shiro安全框架上传文件时用HttpSession获取ServletContext为null问题解决方法。

    <!--在shiroFilter 中加入一下配置--> <init-param> <param-name>targetFilterLifecycle</par ...

  4. Speed-BI报表按钮链接设置

    使用Speed-BI开发报表的时候,常常会需要增加一个链接按钮,点击按钮可跳转到其他报表或外部链接:那么我们可以通过新增‘仪表盘’--‘文本框’图表(如图1), <ignore_js_op> ...

  5. C++ 单向链表反转

    单向链表反转,一道常见的面试题,动手实现下. #include "stdafx.h" #include <stdlib.h> struct Node{ int data ...

  6. 单列模式 (singleton pattern)

    单列就是说一个类只能被实例化一次,重点是确保某个对象只有一个,不会有第2个. c# 的实现是这样的 代码来源 : http://www.cnblogs.com/zhili/p/3185302.html ...

  7. nmap svn

    http://stackoverflow.com/questions/13296361/nmap-and-svnlib-client-not-working-together http://nmap. ...

  8. win8.1（64位） apache2.4.3+php5.6.3+mysql5.6安装

    win8.1(64位) apache2.4.3+php5.6.3+mysql5.6安装 http://blog.csdn.net/jiangzeyun/article/details/41676639

  9. C 語言中的編譯指示 (Pragma)

    編譯指示 #pragma 是用來告知編譯器某些特殊指示,例如不要輸出錯誤訊息,抑制警告訊息,或者加上記憶體漏洞檢查機制等.這些指示通常不是標準的 C 語言所具備的,而是各家編譯器廠商或開發者所制定的, ...

  10. C++中对sprintf()函数的说明(转)

    在将各种类型的数据构造成字符串时,sprintf 的强大功能很少会让你失望.由于sprintf 跟printf 在用法上几乎一样,只是打印的目的地不同而已,前者打印到字符串中,后者则直接在命令行上输出 ...