または私は休憩なしであまりにも長い間ウェブページを構築してきました、または何か本当に奇妙なことが起こりました。
<div style="background-color:#0F0; margin:5px; height:5px;"></div>
親divの幅全体で5つの高さの長いバーになります。divに幅を指定しなかったため、これは通常は表示されないはずです。
私はすべてを試し、CSSレイアウト全体を台無しにしましたが、それを取り除くものは何もなかったようです。同じプロジェクトで、まだこのように機能しているdivを確認することもできます。
そこで、新しいプロジェクトを開いて、上の行に入力して、スタイル設定が混乱していないことを確認しました。しかし、それでも緑色のバーが表示されています。
divをその中のテキストのサイズにしたいだけです。
繰り返しますが、私は物事を見ることができましたが、これは突然起こり、私は本当に無知です...
divはdisplay:block、コードに含まれているか、ブラウザから継承されている必要があります。
display:inline希望する結果になるように変更してください。
ここに例があります。 http://jsfiddle.net/Hn2xP/1
display:inlinediv要素が自動的に取得するために使用しますdisplay:block
デフォルトでは、div要素のstyledisplayプロパティはに設定されています。これによりblock、親の寸法を埋める幅になります。
次のように、テキストにクリップするposition: absoluteか、float: left（適切に機能するかによって異なります）、 2つのオプションがあります。
<div style="background-color:#0F0; margin:5px; height:5px; position: absolute;"></div>
また：
<div style="background-color:#0F0; margin:5px; height:5px; float: left;"></div>
詳細については、CSSフロートおよび/またはCSS位置を参照してください。
PS絶対位置やフロート要素は、ドキュメントフローから削除されることに注意してください。
ドキュメントフローを維持したい場合は、span代わりにを使用します-Blowsieが提案したように、divそのdisplayプロパティはinlineデフォルトです。
<span style="background-color:#0F0; margin:5px; height:5px;"></span>
displayプロパティがに設定されているオプションもありますがinline-block、互換性には制限があります。詳細については、 CSSDisplayプロパティ情報を参照してください。
<div style="background-color:#0F0; margin:5px; height:5px; display: inline-block;"></div>
通常、パディングの問題。コードやサイトエラーの例を見ずに診断するのは難しい。
試す：
div {padding: 0px;}
あなたのCSSで
デフォルトでは、divの幅はautoです。これは、使用可能なコンテンツ全体を埋めることを意味します。必要に応じて「幅なし」にするには、幅を明示的にゼロに設定します。または、他の回答の1つを使用してください...