1.那是因为第二个标签是inline-block,它的对齐方式是基线对齐，对齐的是第一个元素里面字的下划线，所以第二个元素的下边缘对齐的是1的下划线，只要在第二个元素里面加内容或者加个空格( )就可以了。个人认为inline-block和inline性质一样，只是一个可以设置宽高一个不可以。

2.inline-block的默认对齐方式的问题

inline-block默认对齐方式是底部对齐

加一个vertical-align:top; 属性

把垂直对齐方式改为顶部就好了

display:line-block的更多相关文章

  1. <div>里用display：block有用么？

    对所有的块元素都没有意义,块元素的dispaly属性默认值为block,没必要再显式定义--除非你之前对块元素的display属性重新定义过. =========================== ...

  2. display：block什么时候使用

    所有的块级元素不需要再在使用display:block定义,块级元素本身的默认属性就是block display:block:比较常用于<a><span>这两个标签,因为他们不 ...

  3. display：block inline-block inlined的区别

    一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置   margi ...

  4. display：block jquery.sort()

    对所有的块元素都没有意义,块元素的dispaly属性默认值为block,没必要再显式定义——除非你之前对块元素的display属性重新定义过.===========================多罗 ...

  5. 大话css之display的Block未解之谜（一）

    用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 b ...

  6. 对table的tr使用display：block显示colspan失效问题的解决

    qqqq <table> <tr> <td id="qqq" colspan="3" style="display:no ...

  7. 网页计算器，（类，隐藏域，style=display：block等）

    第一个文件:表单文件 <html> <head><meta http-equiv="content-type" content="text/ ...

  8. [CSS3] CSS Display Property: Block, Inline-Block, and Inline

    Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...

  9. display：block;inline;inline-block大总结

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  10. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

随机推荐

  1. 源特定组播（SSM：Source Specific Multicast）

    源特定组播(SSM:Source Specific Multicast)是一种区别于传统组播的新的业务模型,它使用组播组地址和组播源地址同时来标识一个组播会话,而不是向传统的组播服务那样只使用组播组地 ...

  2. 【Hibernate】---【注解】多对多

    一.核心配置文件 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hibernate-con ...

  3. 模态框——angular

    ui-bootstrap-tpls.js库 $uibModal服务 $uibModalInstance服务 一.在angular中应用modal $uibModal 使用方法:直接注入到控制器中. . ...

  4. 机器学习【一】K最近邻算法

    K最近邻算法 KNN 基本原理 离哪个类近,就属于该类   [例如:与下方新元素距离最近的三个点中,2个深色,所以新元素分类为深色] K的含义就是最近邻的个数.在sklearn中,KNN的K值是通过n ...

  5. 【MM系列】SAP 客户增强

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP 客户增强   前言部分 大家 ...

  6. 【Qt开发】设置Qt应用程序图标

    [Qt开发]设置Qt应用程序图标 标签:[Qt开发] 首先,准备一个图标,例如:zx.ico,并新建一个文本文档,在里面添加一行: IDI_ICON1 ICON DISCARDABLE"zx ...

  7. 2019JAVA第一次课程总结

    课程总结:到现在为止之,学习专业课程已有两周了,从刚开始的啥也不懂,现在慢慢入门了.最开始我们为JAVA开发了运行环境,然后使用类编写了最简单的输出,然后开始学习了数据类型,这可以在编程中帮我们解决一 ...

  8. 《剑指offer》面试题23 从上往下打印二叉树 Java版

    注意层序遍历的时候对每一层的处理方式可能不同,这里把每一层的元素保存进一个List中了,那么就需要记录每一层的数量. public List<List<Integer>> se ...

  9. MyBatis二级缓存的笔记及记录

    一.什么是二级缓存: 由于一级缓存是一次性的.临时的:每个会话都会创建一个新的:多个会话之间是不能共享的: 二级缓存用于解决一级缓存的不足:每一个“namespace”都会对应一个二级缓存:执行查询的 ...

  10. 【7.24校内交流赛】T1&T2

    T1: 一个脑洞很大的题,将输入的所有数异或起来输出就好了: (话说我为什么这么喜欢用异或啊) #include<bits/stdc++.h> using namespace std; i ...