解决行内块元素(inline-block)之间的空格或空白问题

一、问题产生

由于html代码格式化后,标签会缩进或者换行。由于浏览器默认处理导致元素在页面显示中出现单个空格问题,尤其在行内或者行内块元素布局时影响比较明显

例如:

代码

页面显示

二、解决方案

这种问题出现让人很头疼,寻访答案却都差强人意:不是兼容性问题就是需要对布局进行特殊处理,总之都不是很完美。

最终我的解决方案是:给右侧行内块元素设置css样式:margin-left:-4px;

这样虽然不是从根本上解决问题,但是:一不会产生兼容性问题,二不会影响整体布局

修改后页面显示效果

三、一些其他大佬的方案

1、不换行

<div style="border:1px red solid">
<a style="display:inline-block;width:20%;">1111</a><a
style="display:inline-block;width:80%;">2222</a>
</div>

缺点:这样写代码,太不优雅了,解读性太差。最重要的是运用模版的时候,比如我遇到问题的瀑布流,那都是只写一个元素,剩下的是通过循环遍历,自动添加的元素,根本没办法控制换不换行。
2、给父元素设置font-size:0
缺点:子元素如果需要字体的话,会需要重新在子元素添加fon-size的设置。但如果像我一样是图片不需要文字的话,就很完美了。
3、不用inline-block改为float
float是忽略空白符的,不过你的CSS布局可能要重新花一下心思,可能会涉及到清除浮动之类设置。
4、word-spacing属性
这个属性是用来设置单词之间的空白符的,针对IE7及以下浏览器hack,定义word-spacing为-1px,即可修复IE7及以下浏览器下顽固的残留1px间隙问题。
根据你字体的大小,word-spacing的值应该相应的调整。并且不同浏览器的兼容性也不好,个人不是很推荐这种方式。如果hack的话,代码要写一大堆,感觉很麻烦。如果你非要用那我还能怎么办?当然是选择原谅你啦,甩给你一个参考链接:http://demo.doyoe.com/css/inline-block-space/
5、white-space-collapse
CSS3 Text Effects Module**》中就有了「white-space-collapse」属性,用来设置或者检索元素内包含的空白字符。有如下取值:

  • collapse:将一系列空白折叠为一个单独的字符(或者在某些情况下,没有字符)
  • preserve:阻止用户代理折叠空白,换行符保留为强制换行符。
  • preserve-breaks:该值将与「collapse」一样折叠空白字符,但保留换行符为强制换行符。
  • discard:抛弃所有空白。
    现在该属性被转移到《CSS Text Level 4》中,该规范中, 「white-space」分为两部分:white-space-collapse和text-wrap

所以解决办法是:white-space-collapse:discard
但是,由于该属性本身存在的诸多问题以及浏览器厂商没有及时跟进和实现,所以根本用不了。希望这个属性快快上架啦~~

大佬方案原文链接 https://www.cnblogs.com/cuncunjun/p/7390623.html

原文地址:https://www.cnblogs.com/viulu/p/11614349.html

时间: 2024-10-04 10:08:17

解决行内块元素(inline-block)之间的空格或空白问题的相关文章

CSS基础知识(2)三种样式表的写法,块、行内、行内块元素之间的转换

margin: 0 auto /*可以让盒子居中*/1.三种样式表的书写方法 (1)内嵌式写法 特点:样式只作用于当前文件,没有真正实现结构表现分离. <head> <style type="text/css"> 样式表写法 </style></head> (2)外链式写法 特点:作用范围是当前站点,谁调用谁生效,范围广,真正实现结构表现分离. <link rel="stylesheet" href="

块元素、内敛元素、行内块元素特点、相互转换、取消默认效果

块元素特性 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6等等都是块元素,它在布局中的行为: 支持全部的样式 如果没有设置宽度,默认的宽度等于父级的width 盒子占据一行.即使设置了宽度 包含默认样式的块元素 上面讲的块标签中,有些标签是包含默认的样式的,这个含默认样式的有 p标签:含有默认外边距 ul.ol标签:含有默认外边距和内边距,以及条目符号(小圆点或者编号) h1~h6标签:含有默认的外边距和字体大小 dl.dd标签:含有默认外边距 body标签:含

块级元素、行内元素与行内块元素

1.块级元素与行内元素的区别? 块级元素独占一行 行内元素可以在一行显示,但是不能设置上下的padding和margin值. 2.块级元素与行内元素的相互转换? 块级元素转行内元素:display:inline; 行内元素转块级元素:display:block; 3.行内块元素相邻布局的时候,中间几像素的间距怎么解决? 给元素添加浮动 4.常见的块级元素.行内元素与行内块元素? 块级元素 :div.h系列.li.dt.dd.p 行内元素  :span.u.a..em.b.i.u.em 行内块元素

行内块元素 、块元素、内联元素关于text-align:center margin:0 auto的比较

行内元素.块元素的区别 1.行内元素会在一条直线上水平排列 2.行内元素width.height设置无效,padding和margin的上下无效 2.块元素各占一行,垂直排列,相当于末尾有<br>标签 3.块元素可以包含行内元素和块元素,但是行内元素是不能包含块元素的 下面开始上图 首先选择使用一个block  和inline,并给定边框border,方便查看 对于inline设置text-align:center是无效的 后面发现设置宽度 高度也是无效的 因此引入了行内块元素,分别设置宽度,

块级元素,行内(内联)元素和行内块元素分别有哪些, 另外什么是替换元素和费替换元素

参考替换元素和非替换元素: https://www.cnblogs.com/lixiaodou/p/7150624.html   块级元素.行内(内联)元素和行内块元素 块状元素 块状元素代表性的就是<div>,其他如<p>.<nav>.<aside>.<header>.<footer>.<center>.<section>.<article>.<ui>.<li>.<o

行内块元素

行内块元素是什么: 行内元素是无法设置其宽和高的,行内块元素实际就是把块元素以行的形式展现,保留了块元素可以设置的对应CSS属性 插视频的标签: <video src="1\LADY.mp4"  controls height="600" wight="800"></video> SRC="这儿是你放视频的位置"

块元素 行内元素 行内块元素

1.块元素典型代表:div,h1~h6, p,ul,li(ul li列表元素)特点:独占一行,可以设置宽高,嵌套或者包含下,子块元素宽度没有定义时,和父元素宽度默认一致,2.行内元素典型代表:span,a,strong,em,del,ins特点:在一行上显示,不能直接定义宽高3.行内块元素(内联元素)典型代表:input,img特点:在一行显示,可以设置宽高 原文地址:https://www.cnblogs.com/twinkle-/p/9074817.html

html中常见的行内元素和块级元素,还有常见的行内块元素

在html中,元素主要分为行内元素和块级元素: 行内元素指的是书写完成后不会自动换行,并且元素没有宽和高. 块级元素写完后会自动换行,有宽高可以修改. 还有一种特殊的元素叫做行内块元素. 大致分内是: 行内元素有:heda   meat   title  lable  span  br  a   style  em  b  i   strong 块级元素有:body  from  select  textarea  h1-h6 html table  button  hr  p  ol  ul

2019.12.5-网站首页及翻页实例(用的是行内块元素布局)代码

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>翻页实例</title></head><style type="text/css"> .menu{ width: 958px; height: 40px; border:1px solid #000; margin:5