ブロックボックス化した要素を含むリストアイテムの後ろに空行が入る

補足

以下に不具合を回避する方法を挙げます。

• リストアイテム要素の内容物の末尾を、 display:block; を指定した要素にしない。

  <ul>
      <li><span style="display:block;">ブロック</span>インライン</li>
      <li><span style="display:block;">ブロック</span>インライン</li>
  </ul>

  • ブロックインライン
  • ブロックインライン
• リストアイテム要素または display:block; を指定した要素のwidthプロパティやheightプロパティを明示する（【li要素やli要素の子孫要素の幅が指定されているとリストマークが下方にずれる】に注意）。

  <ul>
      <li style="width:80%;"><span style="display:block;">ブロック</span></li>
      <li style="width:80%;"><span style="display:block;">ブロック</span></li>
  </ul>

  • ブロック
  • ブロック
• リストアイテム要素にボーダーまたはパディングを設置する。

  <ul>
      <li style="padding:1px;"><span style="display:block;">ブロック</span></li>
      <li style="border:1px solid blue;"><span style="display:block;">ブロック</span></li>
  </ul>

  • ブロック
  • ブロック