HTML行内级元素之间的空格问题
2021-12-22 17:42
786 查看
HTML行内级元素之间的空格问题
1.为什么元素之间会产生空格?
在编写**行内级元素(包括inline-block元素)**的代码之间如果有空格(换行),在浏览器上就会显示元素之间有空格。
示例代码如下:
.box span { background-color: red; }
<div class="box"> <span>span1</span> <span>span2</span> <span>span3</span> </div>
浏览器运行结果:
注意:
- 不管我们在元素之间敲如多少空格,都会被解析成一个空格;
- 空格本身就是一个字符,所以空格的大小是由父元素的
font-size
来决定的,父级元素设置的字体越大,空格越大;
2.如何去掉元素之间的空格呢?
元素代码之间不留空格:元素产生空格的原因就是我们敲入了空格或者换行,解决方案一就是元素代码之间不留空格,弊端就是代码不美观并且可读性差。
<div class="box"> <span>span1</span><span>span2</span><span>span3</span> </div>
注释掉空格:浏览器不会解析html代码的注释,将空格注释掉也可以消除元素之间的空格,弊端就是繁琐、不美观。
<div class="box"> <span>span1</span><!-- --><span>span2</span><!-- --><span>span3</span> </div>
设置父元素的
font-size
为0:空格的大小是由父元素的字体大小决定的,所以可以给父元素添加font-size: 0;
,注意原来需要消除空格的元素要重新设置自己的font-size
,要不然字体大小会继承父元素的,弊端就是添加了多余的css属性,并且该方法在Safari浏览器中不适用。.box { font-size: 0; /* 给父级元素设置字体大小 */ } .box span { background-color: red; font-size: 16px; /* 防止字体属性继承 */ }
给元素添加浮动:其原理是添加浮动会触发BFC,元素之间生成结界,形成一个独立的渲染空间,元素与元素之间就不会留有空格了,是目前比较好的解决方案。
.box span { float: left; background-color: red; }
相关文章推荐
- HTML 父元素与子元素之间的margin-top问题
- html 元素class 多个class之间空格的含义
- HTML标签换行导多个inline-block元素不能在同一行,img之间会有空格
- Html 5:如何在两个 <div> 元素之间拖放图像
- Vue关于子组件内表单元素与父组件之间的传值问题
- html文本或元素6px间距问题
- Android混合开发之Activity类与html页面之间的相互跳转(并解决黑屏有关问题)
- 关于利用Jsoup解析HTML中 ;变成非传统空格或乱码问题解决方法
- html初级p标签带来的块级元素与内联元素的嵌套问题
- SwfObject解决Html与Flash之间传递参数问题
- 解决HTML select的value值有空格问题
- 移除utf8+BOM格式的html文件头有一行空格的问题
- HTML中关于图片与图片之间的缝隙问题
- HTML中的换行造成空格问题
- html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
- 清理html中空白符/空格/换行在行内元素中产生的间距
- 关于页面之间传参时有空格,中文及点击页面后退按钮的问题
- Html设置html与body元素高度问题
- html表单中元素button点击莫名提交的问题
- 解决行内元素之间的间隔bug问题