行内块元素之间默认间距问题
来源:互联网 发布:java中json增加元素 编辑:程序博客网 时间:2024/06/06 19:25
前言
为了个文档结构条理性,我也来个前言,虽然不知道写个啥。但向大神学习态度不能丢。因为这个问题简单,逻辑性不强,就直接上问题上代码上解决方案了。大神勿喷,有什么问题,别的解决方案方法,希望大神们多多指点
问题描述
行内块元素之间,浏览器会有一个默认的间距,例如照片之间的间距,或者是别的元素类型直接转换过来的行内块元素,浏览器都会有默认的间距。话不多说,直接上图解释其中的bug。
实现上述效果代码如下:
<!DOCTYPE html><html><head><title>test测试行内块之间的默认边距</title><meta charset="utf-8"/><style type="text/css">*{margin:0;padding:0;}.wrap div{width: 300px;height: 300px;display:inline-block;}.wrap div:first-child{background-color: green;}.wrap div:last-child{background-color: blue;}img{width:300px;height: 300px;}.content{/*word-spacing:-20px;*//*font-size:0;*/}</style></head><body><div class="wrap"><div></div><div></div></div><div class="content"><img src="tv01.jpg"><img src="tv01.jpg"></div><textarea rows="2" cols="2"></textarea><textarea rows="5" cols="5"></textarea></body></html>
解决方案
最近总结了一些方法来解决这样的bug,常用的方法有:
1.将所有的行内块元素直接设置浮动,个人认为最直接的方法,当然是在适当的场景中,因为过度的浮动会产生需要清除浮动的必要(自己也总结常用的清除浮动的方法,有兴趣可以喵喵看看,大神越过)。
2.在产生边距的行内块的父元素设置属性:font-size:0px;
3.在父元素上设置,word-spacing(词边距)的值设为合适的负值即可
4.在html中将行内块元素在同一行显示,不要进行美观缩进或者换行
1.将所有的行内块元素直接设置浮动,个人认为最直接的方法,当然是在适当的场景中,因为过度的浮动会产生需要清除浮动的必要(自己也总结常用的清除浮动的方法,有兴趣可以喵喵看看,大神越过)。
2.在产生边距的行内块的父元素设置属性:font-size:0px;
3.在父元素上设置,word-spacing(词边距)的值设为合适的负值即可
4.在html中将行内块元素在同一行显示,不要进行美观缩进或者换行
生活寄语
爱代码,爱生活!
阅读全文
0 0
- 行内块元素之间默认间距问题
- 解决inline和inline-block元素的默认间距问题
- HTML元素间距问题
- 编辑器内标签之间的回车导致元素之间有间距的问题
- 去掉内联元素的默认间距
- 解决inline-block元素默认间距
- 行内元素的默认间距
- 行内元素间距问题
- 去除内联元素之间的间距
- display:inline-block 元素之间由于换行所产生的间距问题
- img默认间隙和li间距问题
- 最大间距问题(元素分段/分桶法)
- 关于内联元素间距问题的解决办法
- <li>标签之间有间距的问题
- inline-block元素与父div底边之间的间距问题(inline-block与vertical-align:baseline)
- 行内元素之间间距的产生与去除
- 去除display:inline-block元素之间间距的方法
- 消除button或inline-block元素之间的空白间距
- Oracle基础知识
- Unity3D之5.6新系统(Video Player)
- BZOJ 3790 神奇项链 (Manacher 贪心)
- 初学数据结构--《数据结构》人民邮电出版社 2.1-2.2
- hdu 6053 TrickGCD 容斥 莫比乌斯
- 行内块元素之间默认间距问题
- B
- Maven学习总结(二)——新建和导入项目
- 2标识符和数据类型
- Android (向服务器提交数据Get-Post)
- github pages 展示自己的项目
- (4) 什么是数据元素?--每天五分钟学习数据结构
- 动态代理
- 如何实现水波纹的自定义