CSS 内联块

• 

  display:inline-block

  相比之下display:inline，display:inline-block主要区别在于允许在元素上设置宽度和高度。此外， display:inline-block顶部和底部边距/填充设置都可以设置，但display:inline却不能。相比之下display:block，主要区别在于display:inline-block元素之后不添加换行符，因此元素可以位于其他元素旁边。下面的示例示出了不同的行为display:inline，display:inline-block和display:block：

  span.a {
            display: inline; /* span的默认值 */
            width: 100px;
            height: 100px;
            padding: 5px;
            border: 1px solid blue;  
            background-color: yellow; 
          }
  
          span.b {
            display: inline-block;
            width: 100px;
            height: 100px;
            padding: 5px;
            border: 1px solid blue;    
            background-color: yellow; 
          }
  
          span.c {
            display: block;
            width: 100px;
            height: 100px;
            padding: 5px;
            border: 1px solid blue;    
            background-color: yellow; 
          }

  尝试一下
• 

  使用内联块创建导航链接

  一个常见用途display:inline-block是水平而不是垂直显示列表项。以下示例创建水平导航链接：

  .nav {
                    background-color: yellow; 
                    list-style-type: none;
                    text-align: center;
                    margin: 0;
                    padding: 0;
                  }
  
                  .nav li {
                    display: inline-block;
                    font-size: 20px;
                    padding: 20px;
                  }

  尝试一下