bombless
V2EX  ›  CSS

inline-block大家是怎么控制行距的?

  •  
  •   bombless ·
    bombless · Aug 2, 2013 · 8134 views
    This topic created in 4693 days ago, the information mentioned may be changed or developed.
    我有一个跨两行的inline-block元素列,高度都是一样的,第一行到第二行有一个行距似乎是个random value,既不是border也不是margin也不是padding。
    我还以为是line-height的问题,结果把line-height设成0,这个行距还是有,把line-height设成和height一样,在Chrome/Firefox倒是正常了,在IE10又不对了。
    12 replies    2014-12-25 01:12:42 +08:00
    jjplay
        1
    jjplay  
       Aug 2, 2013
    这种问题可能是两段代码书写时候 留下的回车 bom字节 引起的间距,清除下 或者不折行 ,还有种是图片外边留下的间隙 用font-size:0; 搞定
    hourui
        2
    hourui  
       Aug 2, 2013
    基本上我是把换行符干掉
    tokki
        3
    tokki  
       Aug 2, 2013   ❤️ 1
    用 letter-spacing 可以解决这个问题 在某些浏览器下这个数值还是不一定的

    具体参考 http://purecss.io/ 他是使用inline-block做布局的

    当初由于简单才用这个,最近感觉各种不完美
    NemoAlex
        4
    NemoAlex  
       Aug 2, 2013
    没有看懂楼主的描述
    66beta
        5
    66beta  
       Aug 2, 2013   ❤️ 1
    @NemoAlex 楼主讲的应该是这个
    口口口口口口口口口口口口口口口
    你好,我是来恶心你的未知间隔
    口口口口口口口口口口口口口口口
    NemoAlex
        6
    NemoAlex  
       Aug 2, 2013
    @66beta 如果是这个问题,简单把父元素的 line-height 或者 font-size 设为0就可以了
    感觉楼主说的是更复杂的问题
    P233
        7
    P233  
       Aug 2, 2013
    switch
        8
    switch  
       Aug 2, 2013   ❤️ 1
    楼主说的是行距,而不是字(空白)距,这里可以试着设置 vertical-align + line-height。
    PS:字体也可能会影响到设置。
    bombless
        9
    bombless  
    OP
       Aug 16, 2013
    @tokki 谢谢,我多研究研究!

    inline-block估计是有点坑,刚刚看到它的关于baseline的问题。
    http://www.zhihu.com/question/21431313
    @switch谢谢! 是的,字号我忘调了,也可能是字号的问题。
    pertersonvv
        10
    pertersonvv  
       Dec 24, 2014
    @tokki 它和BootStrap有啥区别?
    tokki
        11
    tokki  
       Dec 24, 2014
    @pertersonvv 这个简单啊 5.0了 感觉还不错
    pertersonvv
        12
    pertersonvv  
       Dec 25, 2014
    @tokki 不是说bs很简单么?pure更简单?
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3360 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 43ms · UTC 10:51 · PVG 18:51 · LAX 03:51 · JFK 06:51
    ♥ Do have faith in what you're doing.