css – 没有边距的内联块?

前端之家收集整理的这篇文章主要介绍了css – 没有边距的内联块?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有几个DIV显示为内联块;它们似乎从浏览器中自动应用间距.它们的边距/填充设置为0.有没有办法在不使用负边距的情况下纠正此问题?

解决方法

山姆,你看到的那个空间实际上就是空白.这就是为什么删除填充和边距什么都不做.让我解释.当你有这个:

HTML

<div>
    a
    a
    a
    a
</div>

这就是它呈现的方式:

a a a a

…对?

所以,如果你有这个:

<div>
    <div style="display:inline-block"></div>
    <div style="display:inline-block"></div>
    <div style="display:inline-block"></div>
</div>

……你会得到同样的东西:

block [space] block [space] block

现在……这个问题有很多不同的解决方案.我相信最常见的是评论html中的空格:

<div>
        <div style="display:inline-block"></div><!--
        --><div style="display:inline-block"></div><!--
        --><div style="display:inline-block"></div>
   </div>

我不喜欢它 – 我更喜欢保持html尽可能干净.我首选的方法是将父级的font-size设置为0,然后在内联块本身上设置所需的字体大小.像这样:

div {
    font-size: 0; /* removes the whitespace */
}

div div {
    display: inline-block;
    font-size: 14px;
}
原文链接:https://www.f2er.com/css/215305.html

猜你在找的CSS相关文章