「HTML+CSS」カテゴリーアーカイブ

ブラウザで横に入る謎の白線は高さの丸めだった

投稿日時: 投稿者:

web制作で画像と画像の切れ間に原因不明の白い線が入ることがある

border、padding、marginや、要素の何かが押して隙間ができてしまっているんじゃないかといろいろ調べても原因がわからないことがしばしば
いまさらながら気付いたんですけど、この白線は「高さの少数を丸めた結果にできる空地」でした。

heightに割合(%やvh)の指定をすると少数で指定されますが
ディスプレーはpixcel単位で発色するので整数で出力することになります。

結果として、たまに上部要素の下に1px分の空白地帯ができてしまうようで、
コーディングミスではなく、ブラウザやモニタの仕様ってことになります。

っとはいえ、デザイナさんとしてはメッチャ気になる部分だと思います。
どうしても！っという場合はjavascriptなどで高さを整数にしてあげれば線が消えるみたいです。

横並びメニューをdisplay:inline-blockで表現

投稿日時: 投稿者:

結論から書くと次の通り

HTML

<ul>
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
    <li><a href="#">item4</a></li>
</ul>

CSS

ul {font-size:0}
ul li{
font-size:10px;
display:inline-block;
text-align:center;
vertical-align:middle;
}

display:inline-blockで横並びメニューを表現すると、
HTMLのマークアップの問題でメニューの間に1文字分の空白ができてしまいます。

上の方法では、font-sizeを0にして幅をなくす方法で対処しています。

このほかにも次のような方法があるようです。

可読性のためのスペースをコメントアウトする方法
<ul><!--
    --><li><a href="#">item1</a></li><!--
    --><li><a href="#">item2</a></li><!--
    --><li><a href="#">item3</a></li><!--
    --><li><a href="#">item4</a></li>
</ul>

CSSセレクタでDOMみたいにテキストノード指定ができると綺麗なんだけどな～。。。