【HTML笔记】--- 内联元素间距问题及解决方案

一、内联元素间距问题

 

 在HTML实践中我们会发现,有时候内联元素之间会存在一定的间距,并且这间距和margin和padding无关。这是由编辑时的空白字符引起的,并且间距的大小受父元素的font-size影响。

这和CSS的white-space属性有关,该属性的默认值为normal,normal属性是将多个空白字符合并成一个“空白”,这个空白和父元素的font-size有关。所以当内联元素之间存在空白字符时,它们之间就存在一个“空白”间距。

 <img>图像元素也属于内联元素,所以处理图像元素间的“空白”也可使用下列解决方案。

 

二、解决方案

 

 1.在编辑器中清除空白字符

简单粗暴的方法

处理前:

【HTML笔记】--- 内联元素间距问题及解决方案



--------------------------------------

处理后:
<body> <span style="font-size: 25px; background-color: #CCFF66;">today</span><span style="font-size: 25px; background-color: #CCCCFF;">tomorrow</span> </body>

【HTML笔记】--- 内联元素间距问题及解决方案

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpypwj.html