查分网站制作,网站色彩的搭配原则有哪些,长春新建火车站,大连知名互联网公司问题#xff1a;在本地项目中使用【display: inline-block】#xff0c;元素间存在4px间隔。打包后发布到外网又不存在这个问题了。 归根结底这是一个西文排版的问题#xff0c;英文有空格作为词分界#xff0c;而中文则没有。 此时的元素具有文本属性#xff0c;只要标签… 问题在本地项目中使用【display: inline-block】元素间存在4px间隔。打包后发布到外网又不存在这个问题了。 归根结底这是一个西文排版的问题英文有空格作为词分界而中文则没有。 此时的元素具有文本属性只要标签与标签之间有间隔【换行符|空格|间隙】都会被当作以一个字体大小的空格就会出现4px的间隙。而且在垂直方向上文本的基线不同也会造成错位。
使用【display: inline-block】出现间隔解决办法
①在写代码时全部写在一行上移除了空格问题代码可读性大大降低。
②如果打包项目后未进行压缩处理可以设置子元素除第一个【margin-left:-5px】。
③父级元素中【font-size:0】,再在子元素单独设置字体大小【font-size:14px】。
④父级元素中【letter-spacing: -5px】,再在子元素单独设置【letter-spacing: 0】。
⑤父级元素中【word-spacing: -5px】,再在子元素单独设置【word-spacing: 0】。
参考文章拜拜了,浮动布局-基于display:inline-block的列表布局 « 张鑫旭-鑫空间-鑫生活
使用【display: inline-block】出现上下错位解决办法
①使子元素的高度相同。
②如果两个div高度不相同可以使用【vertical-align: top|middle|bottom 】进行【上|中|下】对齐。
③使用【overflow: hidden】解决。
