html底部空白无法清楚,清除行内元素之间HTML空白的几种解决方案

行内块(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的注释标记顶替元素之间的空白:

复制代码

代码如下:

• Item content
• Item content
• Item content

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

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

复制代码

代码如下:

ul.inline-block-list li {

margin-left: -4px;

}

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

虽然这些方案都不是很理想,但是如果不这样处理，那你的HTML代码结构可能就非常混乱，成为标准的垃圾代码。

因为行内元素非常好用,所以这并不是一个小心避免的雷区,作为开发人员,学会处理这种空白问题也是很重要的。

清除行内元素之间的HTML空白

原文连接:Remove Whitespace Between Inline-Block Elements 原文日期: 2013年8月27日 翻译日期: 2013年8月28日 至今我还记得年轻是在IE6 ...

CSS HACK tab制表符导致行内元素之间的空隙如何解决

随机推荐

mysql修改引擎

1 查看系统支持的存储引擎 show engines; 2 查看表使用的存储引擎 两种方法: a.show table status from db_name where name='table_na ...

ural 1217. Unlucky Tickets

1217. Unlucky Tickets Time limit: 1.0 secondMemory limit: 64 MB Strange people live in Moscow! Each ...

ckeditor与ckfinder简单整合使用

Ckeditor与ckfinder简单整合使用 功能:主要用来发送图文的email,图片上传到本地服务器,但是email的图片地址要写上该服务器的远程地址(图片地址:例如:http://www.bai ...

Linux下部署Symfony2对app/cache和app/logs目录的权限设置

在linux下部署完Symfony2,可能在访问的时候会报app/logs或者app/cache目录没有写权限的错误.在linux下,如果我们在命令行登陆的用户和web应用服务器(apache.ngi ...

linuxmint卸载软件

删除你已经卸载掉的软件包的命令为 sudo apt-get autoclean 还有一类软件包,我们每个人都应该删除,那就是你已经卸载了,但是一些只有它依赖而别的软件包都不需要的软件包还留在你的系统里 ...

SQL实践遇到的知识点

聚集函数count() count()统计元组的个数,即行数 count(0).count(1)与count(*)的执行效率是一样的 count(column)与count(*) 如果column中含 ...

mac下crontab定时任务使用

这篇文章的作用 BREAK TIME 本地pc配置定时任务,开机后每隔一小时执行一次,open这个页面,休息半分钟 cron创建备忘 首先创建定时任务 crontab -e 0 */ * * * op ...

十分钟搞定pandas

转至:http://www.cnblogs.com/chaosimple/p/4153083.html 本文是对pandas官方网站上<10 Minutes to pandas>的一个简单 ...

C&num; 泛型的简单讲解和应用

泛型 什么是泛型 泛型是 2.0 版 C# 语言和公共语言运行库 (CLR) 中的一个新功能.泛型将类型参数的概念引入 .NET Framework,类型参数使得设计如下类和方法成为可能:这些类和方法 ...

VS Code 配置 C&sol;C&plus;&plus; 环境

写作原因 微软的 VSCode 一直以来为人诟病的一个问题就是对于 C/C++ 工程的编译以及调试支持度有限,配置起来比较复杂,但是 vscode-cpptools 团队经过一段时间的 bug 修复之 ...