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. Struts2 UI标签

    表单标签的共同属性(该属性只在没有使用 simple 主题时才可以使用) form 标签  用来呈现 HTML 语言中的表单元素 默认情况下, form 标签将被呈现为一个表格形式的 HTML 表单. ...

  2. JAVA-6-简单的模拟ATM使用

    public static void main(String[] args) { in = new Scanner(System.in); int count = 1; int pwd = 11111 ...

  3. Qt5如何设置静态编译，解决生成的可执行文件打开出错问题

    将https://yunpan.cn/cqGGURjmG2fEY  访问密码 8de5  中的压缩包Qt5-MSVC-Static-master.zip 解压到你的qt安装目录,一般就是C:\Qt下, ...

  4. 26.单片机中利用定时器中断,在主流程while(1){}中设置每隔精确时间计量

    { CountMilliseconds++;//只负责自加,加到最大又重新从0开始 } u16 setDelay(u16 t) { ); } u8 checkDelay (u16 t)//返回非零表示 ...

  5. 1.1HTML的基本概念

    1.WWW有3个基本的组成部分,分别是URL(统一资源定位器),HTTP(超文本传输协议),HTML(本文本标记语言). 2.一个HTML文件是由一系列的元素和标签组成的,元素不区分大小写. 3.&l ...

  6. CSS 特效 (教程还是英文的好)

    Border-radius: create rounded corners with CSS! http://www.css3.info/preview/rounded-border/

  7. js数组(列表)的基本操作

    本文主要介绍JS对数组(列表)的基本操作.习惯了用数据库的操作顺序来说明:增.删.改.查:合并,裁剪,排序,格式化. 一.数组元素的添加(增加) 增加数组元素有三种方法:unshift()  push ...

  8. 标签static

    静态文本控件的功能比较简单,可作为显示字符串,图标,位图用.创建一个窗口可以使用成员函数: BOOL CStatic::Create( LPCTSTR lpszText, DWORD dwStyle, ...

  9. javaWeb图片验证码代码

    1. [代码]初始粗糙代码 import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.a ...

  10. android上传图片至服务器

    本实例实现了android上传手机图片至服务器,服务器进行保存 服务器servlet代码publicvoid doPost(HttpServletRequest request, HttpServle ...