CSS、浮動小数点：leftは隠しパッドを追加しますか？

私はhtml5/cssユニバースの新機能です。私は何か非常に基本的なことをしようとしています。なぜ私が結果を得ているのか理解できません。私は私のコンテンツの側面にサイドバーを追加したいと思います。私は自分のコンテンツに310pxのマージンを追加し、そこにサイドコンテンツを浮かべることでこれをやっています。簡単！CSS、浮動小数点：leftは隠しパッドを追加しますか？

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <style> 
    div.sidebar{float:left;width:300px;padding:0;background-color:yellow;} 
    div.content{margin-left:310px;background-color:green;} 
    </style> 
</head> 
<body> 

<div class="sidebar"> 
<h1>Sidebar</h1> 
</div> 

<div class="content"> 
<h1>Content</h1> 
</div> 

</body> 
</html>

しかし、奇妙な何かが起こっている、サイドバー（黄色）の上方および下方1EMパディングがあるように思われるではなく、コンテンツ（緑）。その結果、タイトル「サイドバー」と「コンテンツ」は整列していません。私はちょうど浮動小数点：左に自動的に余分なものが追加されたと思っているのだろうか？そして、このパッディングは削除できますか？パディング：0;何の効果もないようです。

出典

2016-04-10 Chris

これは、「h1」要素に適用される「margin」によるものです。 '.content'はフローティングではないので、余白は崩壊しています。 'h1'から' margin'を取り除くと、問題は消えます。おそらく適切な答えで他の誰かから提案される他のオプションがあります。 –

私は以下の答えを受け入れましたが、これはまさに私が探していたものです。ありがとう！ – Chris

問題はありません@クリス、私は助けてうれしいです。 –

この

 <!DOCTYPE html> 
    <html> 
    <head> 
     <meta charset="utf-8"> 
     <style> 
     body,html{margin:0;padding:0px} 
     div.sidebar{display:inline-block;float:left;width:300px;padding:0;background-color:yellow;} 
     div.content{margin-left:10px;display:inline-block;float:left;background-color:green;} 
     </style> 
    </head> 
    <body> 

    <div class="sidebar"> 
    <h1>Sidebar</h1> 
    </div> 

    <div class="content"> 
    <h1>Content</h1> 
    </div> 

    </body> 
    </html>

出典

2016-04-10 09:31:58 LoopCoder

ああ！私は 'フロート：'を放棄しようとしましたが、それは物事を悪化させました。また、 'display：inline-block'を追加するとトリックが実行されます！ – Chris

Good、happyコーディング – LoopCoder

-1

すべてのブラウザは、それは要素がより見やすく表示させるために使用する独自のデフォルト「ユーザーエージェント」スタイルシートを、持ってみてください。たとえば、デフォルトでは、ほとんどのブラウザがリンクを青くしてリンクを訪問し、パープルには一定量の枠線やパディングを与え、H1、H2、H3などには可変のフォントサイズを適用し、ほとんどすべてにパディングを適用します。あなたが持っているパディングは、デフォルトのブラウザ設定のためです。要素のグローバルリセットを試してください。

例：* {margin：0;パディング：0}

出典

2016-04-10 09:32:33 SoilerJoe

CSS、浮動小数点：leftは隠しパッドを追加しますか？

答えて

関連する問題