2011年04月21日

c2a0 スペースはHTML/CSSレイアウトを崩す。このエントリーをはてなブックマークに追加

こんな感じで、BOXを2つフロートさせたかっただけなんです。

45)

しかし、なぜか・・・右の余白が落ちてしまう。(ソース1

18)

どんハマりました・・・こんな単純なことなのに!

margin, padding, widthをいじること数十分。直らない。

試行錯誤を重ねていたら、、、あれ?いつの間にか直ってる。なんでだ??

アンドゥを繰り返していくと・・・まさかの・・・

13)


<body>の外にある、<head>あたりのスペースを消すと解決する!

<body>の外の要素が邪魔をしている?!

意味はわからないけど、<html>を色をつけた<span>で囲ってみます。
<body>どころか<html>の外でタグって効くのかな・・・

 どん!

00)

 なっなんだこのピンク部分は!!

 何かがいるぞ!!!

◆結論


40)

この赤い部分、ここに例のc2a0スペースが隠れていました・・・orz
まさかの<head>の内外です・・・<body>関係ない・・・orz

◆追跡



04)

試しに、<html>の外に出してみる。

26)

うわぁ・・それでも表示されてしまう・・・


22)
普通のスペースに置き換えてみる。

45)
問題なし。普通の挙動。


◆納得


そもそもブラウザは、タグ以外の文字をすべて出力するものなのだ。

こんなコードでも

08)

abcは表示されるからね。

12)

その中で、バイトコード20のスペースは表示しないで捨てるようになっているのだ。
(\r \nの改行コードもね。)

c2a0は、文字として認識され、出力されるのだ。

◆ちょっとの不思議が残った

54)

こうして頭にテキストを入れると、

21)

なんで右のボックスの上に表示されるんですかね。
順番的には左のボックスの前だと思うんだけど、floatの仕様なのかな。
このせいで、犯人はボックスとボックスの間にいると信じて疑わず、かなり悩んだ!

参考
&nbsp; は半角スペースではないというお話 (フェンリル | デベロッパーズブログ)


関連:c2a0 スペースはHTML/CSSレイアウトを崩す。
[php][javascript] おかしな文字があったらbin2hex。文字コード バイトコード 16進数 0x : レスペス・トランクィル
[php] C2A0 REMOVER - nbspを取り除く : レスペス・トランクィル


●ソース1 どうみても普通なのにだめだったソース。



<html>
    <head>
        <META http-equiv=content-type content="text/html; charset=UTF-8">
        <title>float box</title>
<style>
* {margin:0; padding;0; }

body { width:200px;
background-color:#fedeaF;
}

div { width:100px; height:100px; }

#aaa { background-color:#5eeeFF;
float:left;
}

#bbb { background-color:#5efe3F;
float:right;
}

</style>
</head>
<body>
<div id="aaa"></div>
<div id="bbb"></div>
</body>
</html>



●ソース2 spanでスペースをハイライトさせたもの



<span class="high">
<html>
    <head>
        <META http-equiv=content-type content="text/html; charset=UTF-8">
        <title>float box</title>
<style>
* {margin:0; padding;0; }

body { width:200px;
background-color:#fedeaF;
}

div { width:100px; height:100px; }

#aaa { background-color:#5eeeFF;
float:left;
}

#bbb { background-color:#5efe3F;
float:right;
}
.high {background-color:#ff009F;}

</style>
</head>
<body>
<div id="aaa"></div>
<div id="bbb"></div>
</body>
</html>
</span>



●問題ないソース c2a0を取り除いたもの。



<html>
<head>
<META http-equiv=content-type content="text/html; charset=UTF-8">
<title>float box</title>
<style>
* {margin:0; padding;0; }

body { width:200px;
background-color:#fedeaF;
}

div { width:100px; height:100px; }

#aaa { background-color:#5eeeFF;
float:left;
}

#bbb { background-color:#5efe3F;
float:right;
}
.high {background-color:#ff009F;}

</style>
</head>
<body>
<div id="aaa"></div>
<div id="bbb"></div>
</body>
</html>



これに関連した記事→│ css  
 

この記事へのトラックバックURL