zoukankan      html  css  js  c++  java
  • 如何移除相邻两个 display: inlineblock 元素间的间隔

    引用地址



    HTML 如下:

    <p>    <span>hello</span>    <span>world</span></p>

    CSS 代码:

    span {    display:inline-block;    100px;    background:#36c;    color:#fff;    font-size:30px;    text-align:center;}

    在页面上他们之间会有一个空格的间隔,我知道只要移除他们之间的空格就显示正常了:

    <p>    <span>hello</span><span>world</span></p>

    但我想知道如何在不修改 HTML、不使用 JS 的情况下,有没有通过修改 CSS 来解决的方法?


    这个原因跟字体类型和大小有关系。
    雅虎 YUI 的解决方法是把letter-spacing和word-spacing改成某个负值能解决(不同的字体值不同),ytzong 给了个一劳永逸的解决方法,直接写成 -.5em 或者更大 http://www.99css.com/archives/690

    .span {    letter-spacing:-.5em;/* webkit: collapse white-space between units */    *letter-spacing:normal;/* reset IE < 8 */    word-spacing:-.5em;/* IE < 8 && gecko: collapse white-space between units */}

    我个人更喜欢通过修改父元素的字体大小,将大小设置为font-size: 0来解决:

    p {    font-size:0;}



  • 相关阅读:
    spring
    23种设计模式
    get getline
    ping
    Android四大组件
    C++数据结构
    玩转windows便签
    [JavaScript]再谈 this
    [JavaScript]面向对象编程浅析之XJB讲
    [JavaScript]MVC浅析
  • 原文地址:https://www.cnblogs.com/danghuijian/p/4399973.html
Copyright © 2011-2022 走看看