在前端页面编辑中,常常用于块元素横排列时,我们会用到浮动或者dispaly:inline-block;

浮动虽然好用,效果明显,但是会存在潜在BUG,(暂且不论);那么display:inline-block也能使其横排,但是有两个很明显的问题:

1.横排元素之前没有设置,margin却多出了间距;

2.横排元素不能在同一水平线上;

看图:

处理方式:只需要在横排元素的父级设置font-size:0;即可

原因:

代码编译时,标签间有折行或空格,都相当于字符空格,这种字符,默认有font-size;所以除了设置font-size=0;还可以不进行折行或空格,但是这样不利于代码的阅读;

原图:

分析图:在父级元素首标签后按一个”delete“后面就会显示出空格字符

OK,接下来我们继续处理横排不在同一水平线的问题(顺带提一下,float无此BUG,都会以下边对齐);

原图:

处理:这是因为横排元素在父级元素盒子中,没有垂直方向的对齐方式;所以对横排元素垂直方向给与对齐设置即可;

详细的水平线问题,可以转移到这位老铁这里:

http://www.zhangxinxu.com/wordpress/2010/11/%E6%8B%9C%E6%8B%9C%E4%BA%86%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80-%E5%9F%BA%E4%BA%8Edisplayinline-block%E7%9A%84%E5%88%97%E8%A1%A8%E5%B8%83%E5%B1%80/

以及案例:

https://segmentfault.com/q/1010000007142118?_ea=1251429

display:inline-block下,元素不能在同一水平线及元素间无margin间距的问题解决方法的更多相关文章

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

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

  2. float:left 与display:inline的具体区别?

    设了float:left的元素允许它的右边存在任何元素同行显示,不论是内联元素还是块元素.但它的左边还是不允许存在任何元素与之同行显示,哪怕其它的元素的代码在前,除非也给前面的元素加上float:le ...

  3. display:inline与display:block——行内元素显示与块级元素显示

    display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...

  4. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  5. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  6. display:block、display:inline与displayinline:block的概念和区别

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

  7. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  8. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  9. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

随机推荐

  1. js设计模式之惰性单例模式

    <html> <body> <button id="loginBtn">登录</button> </body> < ...

  2. UINavigationController 返回手势与 leftBarButtonItem

    UINavigationController 返回手势与 leftBarButtonItem UINavigationController 自带从屏幕左侧边缘向右滑动的返回手势,可以通过这个手势实现 ...

  3. Django_自带的admin管理页面

    Django的admin管理页面非常的好用,接下来就简单的说一下: 首先当你在pycharm中启动django服务端程序之后,在浏览器中输入地址就可以访问 当你输入默认的admin页面,,会弹出来下边 ...

  4. Asp.net Mvc 与 Web Api生命周期对比

    完整的生命周期比较复杂,对细节感兴趣的同学可购买老A的图书学习:传送门 本文只简单讲述路由注册.controller创建.action选择的3个主逻辑线,其他的内容大家可自己阅读相应的代码 先上二者单 ...

  5. 前端Web开发MVC模式-入门示例

    MVC概论起初来之桌面应用开发.其实java的structs框架最能体现MVC框架:model模型是理解成服务器端的模块程序:view为发送给客服端的内容:control为servlet程序控制跳转和 ...

  6. SpringBoot(四)之thymeleaf的使用

    这篇文章将更加全面详细的介绍thymeleaf的使用.thymeleaf 是新一代的模板引擎,在spring4.0中推荐使用thymeleaf来做前端模版引擎. thymeleaf介绍 简单说, Th ...

  7. Awesome-Link——我的积累、推荐和分享

    积累一些自己看过的比较好的技术博客.以后忘记了可以回过头来看,毕竟有些博客已经写的非常的好了.有些自己写的也会列举在上面.同时还包含一些好用的插件.工具.网站等等. github准备长期更新,欢迎st ...

  8. [51nod1407]与与与与

    有n个整数,问从他们中取出若干个数字相与之后结果是0的有多少组. 答案比较大,输出对于 1,000,000,007 (1e9+7)取模后的结果. Input 第一行输入一个整数n.(1<=n&l ...

  9. PL/SQL游标详解

    刚打开游标的时候,是位于一个空行,要用fetch into 才能到第一行. 只是要注意用更新游标的时候,不能在游标期间commit. 否则会报ORA-01002: fetch out of seque ...

  10. 【C#】数据库脚本生成工具(二)

    年C#研发的数据库文档生成工具,给之后的工作带来了便利.近日,又针对该工具,用WinForm开发了数据库脚本生成工具-DbExcelToSQL. 下面数据库文档生成工具效果图: 感兴趣的朋友可以看下[ ...