27826


HPでのナビゲーションとして、画像を横に５つ並べて表示させたいと考え、tableを使って画像を  
配置したのですが、table全体の外側の余白が残ってしまいます。

merginを使う方法（<http://hmaster.net/ctable4.html>）などを調べてやってみましたが、余白は消えません。

余白を消す方法について、どなたかご教授いただければ幸いです。

HTMLのコード

[code]

    <div class="menu">
       <ul>
        <li class="menu-item"><img src="nav21.png" id="img2"></li>
        <li class="menu-item"><img src="nav22.png" id="img3"></li>
        <li class="menu-item"><img src="nav23.png" id="img4"></li>
        <li class="menu-item"><img src="nav24.png" id="img5"></li>
        <li class="menu-item"><img src="nav25.png" id="img6"></li>
       </ul>
      </div>
    
[/code]

CSSのコード

[code]

    .menu{
     margin-right: 10px;
     position: fixed;
     margin: 0px;
     list-style: none;
     background-color: #010101;
     filter:alpha(opacity=80);
     -moz-opacity: 0.8;
     opacity: 0.8;
     left: 0;
     right: 0px;
     z-index: 3;
     bottom: 0px;;
     overflow: hidden;
     display: table;
     text-align: center;
     vertical-align: middle;
     padding:0;
    }
    
    .menu-item{
     display: table-cell;
     vertical-align: bottom;
     border-left:1px solid #ffffff;
    }
    
    .menu-item li{
     float: left;
    }
    
[/code]


CC BY-SA 3.0
2016-07-23T21:05:35.520
27825
2016-07-26T07:39:37.203
9527
question
html css
CSSでのtable要素の余白


`ul` に対してマージン・パディングを０にしてみてはどうでしょうか？

例：

[code]

    .menu ul{
        margin:0;
        padding:0;
    }
    
[/code]


CC BY-SA 3.0
2016-07-23T21:18:12.577
27826
2016-07-23T21:18:12.577
5044
27825
answer


ul自体に`display:table;`としていなくて親のdivがtableになっていますね。  
`.menu-item li`というのも、liの中のliということになってしまいます。  
それに、`table-cell`で横並びにしたのなら`float:left;`は不要ですよね。  
要素の階層構造とセレクタの書き方が合っていないように思います。

どこかでスタイルを指定済みであれば、marginやpaddingの上書きが必要ですね。

何もしていなければこのようになるはずです。  
<http://codepen.io/mayo31/pen/bZrPEA>

[code]

    .menu {
      background: #336699;
    }
    
    .menu ul {
      display: table;
      margin: 0 auto;
    }
    
    .menu-item {
      display: table-cell;
      border-left:1px solid #ffffff;
    }
    
    img {
      display: block;
      width: 200px;
      height: 100px;
    }
[/code]

[code]

    <div class="menu">
      <ul>
        <li class="menu-item"><img src="https://source.unsplash.com/random" id="img2"></li>
        <li class="menu-item"><img src="https://source.unsplash.com/random" id="img3"></li>
        <li class="menu-item"><img src="https://source.unsplash.com/random" id="img4"></li>
        <li class="menu-item"><img src="https://source.unsplash.com/random" id="img5"></li>
        <li class="menu-item"><img src="https://source.unsplash.com/random" id="img6"></li>
      </ul>
    </div>
[/code]


CC BY-SA 3.0
2016-07-26T05:42:27.737
27851
2016-07-26T07:39:37.203
2016-07-26T07:39:37.203
3068
17289
27825
answer