【CSS】横並びさせた要素の端っこのマージンを調整する方法

css

よくfloatを利用してボックス要素などを横並びにする機会がたくさんあると思うんですが、だいたい横並びにするときは隣り合う要素にマージンを設定しますよね？
そうなると最初の要素もしくは最後の要素にももちろんマージンが設定されてしまうので、その最初の要素か最後の要素のマージンだけを無くしたいですよね？

margin

こういう時は最初か最後だけclassで「first」とか「last」追加したりしてましたが、どうやら簡単に解除する方法があるようです。

ネガティブマージンを使用するという方法

簡単に言うと親要素に子要素に設定したマージン分をネガティブマージンで差し引けば良いという話。

html



    
  
  • ボックス１
    • 
  
  • ボックス２
    • 
  
  • ボックス３
    •

CSS

ul{
    margin-right:-10px;
    overflow:hidden;
}

ul li{
    width:60px;
    margin-right:10px;
    height:60px;
    float:left;
    display:inline;
}

といった具合にそうな難しいこともなく。まぁほんとはCSS3が使えればこんな必要も無くなってくるだろうと思われますが。
何をしたかと言うと、親要素の「Ul」に「marginに-10px 」を指定しただけです。
しかし、「-10px」を指定した要素にwidthを指定すると効果がありません。
なので、どうしてもwidthを指定しないといけない場合、は別にタグで括るなり対策が必要ですが。