33817


`<div id="study_001">`をまとまりとして、  
`<img>`や下の`<ul>`との間に余白を作りたいのですが、  
重なってしまいます。

divはブロック要素だと思うのですが、  
spanのみを中身にもつdivは高さを持たないということでしょうか？

[![画像の説明をここに入力](https://i.stack.imgur.com/rs2XD.png)](https://i.stack.imgur.com/rs2XD.png)

**[HTML]**

[code]

    <img src="images/001_blue.png" alt="">
    
    <div id="study_001">
    <span id="margin">margin</span><span id="border">border</span><span id="padding">padding</span>
    </div>
    
    <ul>
      <li>HTMLとCSS</li>
      <li>要素</li>
      <li>margin｜border｜padding</li>
      <li>float</li>
      <!--...-->
    
[/code]

**[CSS]**

[code]

    img {
      width: 500px;
      margin: 0 20px;
      float: left;
    }
    
    #study_001{
      clear: left;
    }
    
    #margin{
      padding: 10px 50px;
      margin: 10px 0px 10px 20px;
      background: #f98;
    }
    
    #border{
      border-left: 3px #fff solid;
      padding: 10px 0px 10px 2px;
      background: #988;
      margin: 0;
    }
    
    #padding{
      background: #498;
      padding: 10px 50px;
    }
    
[/code]


CC BY-SA 3.0
2017-04-06T09:15:46.733
33814
2017-04-06T10:46:57.977
2017-04-06T09:21:08.523
12297
12297
question
html css
HTMLで画像と文字が重なってしまう。


開発者ツールで見るとわかりますが、span に指定した padding が親要素 `#study_001` の高さに反映されていません。もちろん、上下
margin も反映されていません。

[![画像の説明をここに入力](https://i.stack.imgur.com/85bat.png)](https://i.stack.imgur.com/85bat.png)

インライン要素の上下位置や間隔は **行の高さ** 、つまり `line-height` を基準に計算されます。ですから padding や border
を指定した場合、その部分が親要素からはみ出したり、前後の行と重なってしまうことになります。

ブロック要素のレイアウトが「高さと幅を持つ箱を並べる」のに対し、インライン要素では「中にあるテキストを流し込む」といったイメージでしょうか。

[code]

    div {
      line-height: 1;
      width: 200px;
      border: 1px solid gray;
      margin: 20px;
    }
    
    span {
      padding: 3px;
      background: rgba(255, 128, 128, 0.5);
      border: 1px solid red;
    }
[/code]

[code]

    <div>
      <span>じゅげむ　じゅげむ　ごこうのすりきれ</span>
    </div>
[/code]

代わりの方法としては

  * padding ではなく line-height で高さを確保する
  * `display: inline-block`（行内に配置されるブロック要素のような感じなので、ボックスの幅や高さを持ち、折り返しで分断されることがない）
  * `display: table-cell`
  * `display: block` \+ `float: left`

等々。どれも使い方によってはデメリットがありますから、用途に合わせて選んでください。


CC BY-SA 3.0
2017-04-06T10:46:57.977
33817
2017-04-06T10:46:57.977
8000
33814
answer