学习CSS你必须踩得那些坑(五)

inline-block空格的问题

现在回去看看,有个问题需要处理一下:

PlatForm,About,Sign Up之间为什么会有间隙?**

使用了inline-block,inline-block会表现得像文字排版一样,

  • 之间存在空白符,所以最后产生了一个空格
  • 有各种奇奇怪怪的方法可以解决这个问题,这里我只给出我平常用得最多的两个方法:

    ·设置font-size: 0;(如果浏览器设置了最小字体大小要跪。。。)

    ·ul{

    ·font-size: 0;

    ·}

    ·li{

    ·display: inline-block;

    ·font-size: 1rem;

    }

    ·去掉标签之间的空白符

  • 喜欢哪个方法就用哪个,快自己把这个bug修复了

    美化导航样式

    .navbar__brand, .navbar__nav li a{

    display: inline-block;

    box-sizing: border-box;

    height: 40px;

    padding: 8px 24px 8px 24px;

    border: 1px solid #ccc;

    line-height: 22px;

    }

    你可能感兴趣的:(学习CSS你必须踩得那些坑(五))