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. gui小日历

    package MyCal; import java.awt.EventQueue; import javax.swing.JFrame; import javax.swing.JPanel; imp ...

  2. Oracle错误问题---- 《ora-12638：身份证明检索失败》

    使用客户端可以连接,但只有一个站点出现此问题,非常郁闷,网上查了一下,发现是用户认证问题,解决办法如下: 在ORACLE客户端目录下 NETWORK/ADMIN下的sqlnet.ora,使用记事本打开 ...

  3. 输入框 input只能输入正数和小数点

    输入框 input只能输入正数和小数点  限制文本框只能输入正数,负数,小数 onkeyup="value=value.replace(/[^\-?\d.]/g,'')" 限制文本 ...

  4. C# 缩略图算法

    代码写多了,有些使用过的方法和技巧会一时半会想不起来,平日记录下来,方便自己和有需要的人日后查阅. using (var stream = new FileStream(physicalPath, F ...

  5. 读书笔记 -part1

    自从毕业以后到现在~看的书是越来越少了 の其实好像貌似从来没有认认真真的看书  除非工作遇到难于解决的问题迫不得已才去翻书看 有些问题也是莫名其妙的就这样解决了  于是乎被人美名其曰“高人”或&quo ...

  6. Css3案例

    <!DOCTYPE html> <html> <meta charset=utf-> <head> <style> body{ backgo ...

  7. 【学习笔记】【oc】copy与mutableCopy

    copy 返回一个不可变的对象: mutableCopy 返回一个可变的对象: 使用copy方法时 类必须实现:<NSCopying>协议中的-(id)copyWithZone:(NSZo ...

  8. 自己封装的HttpRequest，个人觉的比较HttpHelper好用

    新年开篇,忙归忙,还是要写点什么,不然越来越懒,分享我写的HttpTooler public delegate void RequestCompleted(object sender, string ...

  9. ural 1207 Median on the Plane

    极角排序 #include <cstdio> #include <cstring> #include <algorithm> #include <cmath& ...

  10. POJ2104-- K-th Number（主席树静态区间第k大）

    [转载]一篇还算可以的文章,关于可持久化线段树http://finaltheory.info/?p=249 无修改的区间第K大 我们先考虑简化的问题:我们要询问整个区间内的第K大.这样我们对值域建线段 ...