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. setTimeout(fn, 0)引发的JavaScipt线程的思考

    起因 周五改一个checkbox的display属性被错误地设置为none的bug. 经debug发现, 有两个地方修改了display属性: 1) checkbox的controller; 2) c ...

  2. Python正则表达式一

    推荐 http://www.cnblogs.com/huxi/archive/2010/07/04/1771073.html#!comments 这篇博客超好,建议收藏. 不过对于正则表达式小白,他没 ...

  3. 研究一下uucode编码

    uucode编码是把任意二进制数据转换为ascii字符的编码用于在一些只能传递文本的地方传送二进制数据uu模块提供了encode()和decode()用于将一个文件转换为uucode编码的字符文件,文 ...

  4. Ubuntu 13.10 Mono安装历程

    这两天捣鼓一下Mono,记录一下自己所遇到的问题,已经解决办法 首先,先打开gnome-terminal 1. 先更新的一下系统 sudo apt-get update sudo apt-get up ...

  5. Linux入门 (笔记)

    Man can conquer nature. "人定胜天" 一.基本操作   1.重要快捷键 Tab 补全命令.目录.参数.文件名等 Ctrl+c 强制终止当前的程序 Ctrl+ ...

  6. Oracle数据库之数据类型

    Oracle数据库之数据类型 Oracle基本数据类型(亦叫内置数据类型,internal datatypes或built-in datatypes)可以按类型分为:字符串类型.数字类型.日期类型.L ...

  7. jquery中的html()、text()、val()的区别

      1.html(),text(),val()三种方法都是用来读取选定元素的内容: html()是用来读取元素的HTML内容(包括其Html标签),text()用来读取元素的纯文本内容,包括其后代元素 ...

  8. winform中相对路径和绝对路径的获取

    例如: Path.GetFullPath(Path.Combin(@"C:\a\b\c","..\b.text")); ..代表上级目录 .代表当前目录 结果: ...

  9. javascript将form表单中的元素值封装成json格式

    把form表单中的元素值封装成json function toJSON(form)//form是要进行封装的form表单对象,dom对象,可以通过document.mainForm获得,mainFor ...

  10. 《python基础教程》笔记之 列表

    list函数 list函数将其他类型的序列转换为列表,如 >>> list("hello world")['h', 'e', 'l', 'l', 'o', ' ' ...