inline-blockでボックス並べる場合の注意

css関連
2015年9月10日

floatの代わりにinline-blockでボックスを横に並べる場合、指定以外の隙間がでる。
いくつかやり方があるようだが完全版としては今のところ以下の
ような指定でいける。
大事なのは以下。

font-size: 1px;
letter-spacing: -1em;
word-spacing: -1em;

と

letter-spacing: normal;
word-spacing: normal;

で全体的にはこのような感じ。

 .artist-file {
	 margin: 0 auto;
	 width: 855px;
	 font-size: 1px;
         letter-spacing: -1em;
         word-spacing: -1em;
         padding-top: 5px;
	 text-align: left;
 }
	 
.a-item {
	display: inline-block;
  	width: 160px;
  	height: 180px;
  	margin: 5px;
        letter-spacing: normal;
        word-spacing: normal;
  	border: 1px solid #ccc;
}

参考サイト：http://partisan.wwwxyz.jp/seed/2013/01/31/165435.php

PAGE TOP