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. 单点登录CAS使用记（一）：前期准备以及为CAS-Server配置SSL协议

    知识点: SSO:单点登录(Single Sign On),是目前比较流行的企业业务整合的解决方案之一.SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统. CAS:耶 ...

  2. 转：初学者，手工注入测试方法小节 （出处：: 51Testing软件测试网--jie）

    1.加入单引号 ’提交,  结果:如果出现错误提示,则该网站可能就存在注入漏洞.    2.数字型判断是否有注入; 语句:and 1=1 ;and 1=2 (经典).' and '1'=1(字符型)  ...

  3. Axure自动幻灯片制作

    1.打开axure7,开始. 2.拖一个占位符组件到布局上(当然也可以是矩形.图片之类的),大小270*170,作为幻灯片的第一张片子,双击写上“第一张片子”. 3.拖一个矩形,设置形状为椭圆,调整大 ...

  4. js 获取节点

    var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s的下一个 ...

  5. EDIT编辑框

    编辑框 编辑框的主要作用是让用户输入文本,例如要求用户在编辑框中输入密码的文本. ．基础知识 编辑框里的文本可以是单行,也可以是多行,后者的风格取值为 ES_MULTILINE.一般对于多行文本编辑框 ...

  6. 将日志写入Debug窗口

    定义在NuGet包“Microsoft.Extensions.Logging.Debug”中的DebugLogger会直接调用Debug的WriteLine方法来写入分发给它的日志消息.如果需要使用D ...

  7. monogdb笔记１

    :db.collection.remove()与db.collection.drop()的比较 插入100万条测试数据 ;i<;i++){ db.tester.insert({-i}) } 进行 ...

  8. Grunt Server:Fatal error: Port 35729 is already in use by another process.

    提示35729端口被占用,使用lsof命令进行查看: y@y:yo-test$ lsof -i : COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME ...

  9. 51单片机模拟I2C总线的C语言实现

    电路原理图   EEPROM为ATMEL公司的AT24C01A.单片机为ATMEL公司的AT89C51. 软件说明 C语言为Franklin C V3.2.将源程序另存为testi2c.c,用命令 C ...

  10. MyBatis insert后返回自增字段的值

    如下情况适用支持自增的DB,如MySQL.其他情况参见:MyBatis魔法堂:Insert操作详解(返回主键.批量插入) 1.model public class UserInfo { private ...