html中的换行符也占空间,如何解决
2016-05-26 10:06
253 查看
如上图:parent的width:600px;
child1和child2的width:300,display:inline-block;
我们希望它们并排显示,但为什么会换行呢?
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="transoform.css"> </head> <body> <div class="parent"> <div class="child1">1</div> <div class="child2">2</div> </div> </body> </html>
.parent{ width:600px; border: solid; /* font-size:0; */ } .child1{ width:300px; height: 300px; display:inline-block; /* font-size:20px; */ line-height: 300px; text-align: center; background:#ccc; } .child2{ width:300px; height: 300px; display:inline-block; /* font-size:20px; */ line-height: 300px; text-align: center; background: rgba(230, 32, 32, 0.51); }
因为在html中,parent中间有换行空格等等,其实这些也是占据空间的;
如何解决?
① 在parent中添加font-size:0;这样parent内的空格换行就不占空间了;但有个问题,会发现child的文字也没有了,由于font-size默认是继承的;
② 所以第二部就是设置child的font-size;
相关文章推荐
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- HTML5调用摄像头实例
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- 通过Mootools 1.2来操纵HTML DOM元素
- jQuery Html控件基本操作(日常收集整理)
- WEB标准网页布局中尽量不要使用的HTML标签
- Flash 与 html 的一些实用技巧
- html工作中表格<tbody>标签的使用技巧
- HTML 向 XHTML1.0 兼容性指导
- C#自写的一个HTML解析类(类似XElement语法)
- 没有文件大小限制并免费的PDF到HTML转换工具
- JavaScript与HTML结合的基本使用方法整理
- Ruby编写HTML脚本替换小程序的实例分享
- css实现气泡框效果(实例加图解)
- html链接与文本标签们
- html活用软字符连接符
- 浅谈html中id和name的区别实例代码
- HTML <!DOCTYPE> 标签