Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 25|回复: 0

清除行内元素之间HTML空白的几种解决方案

[复制链接]
  • TA的每日心情
    奋斗
    昨天 14:57
  • 签到天数: 135 天

    [LV.7]常住居民III

    1413

    主题

    1470

    帖子

    6万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    63624
    发表于 2021-9-8 09:39:38 | 显示全部楼层 |阅读模式

    行内块(inline-block)是非常有用的,特别是想要不用'block'和'float'来控制这些行内元素的margin,padding之时。 
    问题来了,HTML源码中行内元素之间的空白有时候显示在屏幕上那是相当的讨厌。 
    当然,有一些技巧(方法)可以用来清除他们:比如粗暴地完全删除空白,或者其他的方法: 


    解决方案1: font-size:0; 
    最好的方法是在外层元素上设置font-size:0;同时在内层元素上指定字体具体的大小。 

    复制代码
    代码如下:

    ul.inline-block-list { /* 比如 ul 或者 ol元素 */ 
    font-size: 0; 

    ul.inline-block-list li { 
    font-size: 14px; /* 设置具体的字体大小 */ 


    为了抵消外层元素的字体属性,在内层元素必须指定 font-size 属性,当然这很简单。 
    假若代码是一种复杂的嵌套关系,那么你可能不好去计算或指定这些字体属性,但在大多数情况下,这就是你想要的效果! 

    解决方案2: HTML 注释 
    这种方法比较渣,但是效果也不错。使用HTML的注释标记顶替元素之间的空白: 

    复制代码
    代码如下:

    <ul> 
    <li>Item content</li><!-- 
    --><li>Item content</li><!-- 
    --><li>Item content</li> 
    </ul> 


    一个字来形容: 渣.如果用2个字来形容,那就是"渣渣",用3个字来形容,"解决了"。 

    解决方案3: 指定margin属性值为负数 
    和方案2类似,这个也比较渣。可以使用行内元素的margin属性来抵消空白: 

    复制代码
    代码如下:

    ul.inline-block-list li { 
    margin-left: -4px; 


    这是最糟糕的解决方案了,因为你必须根据具体情况去计算,有时候还不对。你应该尽量避免这样做。 

    虽然这些方案都不是很理想,但是如果不这样处理,那你的HTML代码结构可能就非常混乱,成为标准的垃圾代码。 
    因为行内元素非常好用,所以这并不是一个小心避免的雷区,作为开发人员,学会处理这种空白问题也是很重要的。

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2021-9-26 21:33 , Processed in 0.058140 second(s), 29 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2020, Tencent Cloud.

    快速回复 返回顶部 返回列表