div and span(常見塊級元素和內聯元素的搭配使用) | HTML

<div> 是塊級元素，<span> 是內聯元素因此常常互相搭配 <p> 標籤使用，讓文章不會有強制換行的問題

See the Pen div and span(常見塊級元素和內聯元素的搭配使用)-HTML by lenrich (@lenrich) on CodePen.

範例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>div和span, class和id</title>
    <style>
      .card {
        border: 1px solid #ccc;
        background: #f4f4f4;
        padding: 20px;
        margin-bottom: 10px;
      }
      .enhance {
        color: yellow;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <!-- id是唯一值 -->
    <div id="main-header" class="card">
      <h1>我的blog</h1>
      <p>歡迎來到我的blog</p>
    </div>
    <ul id="main-nav">
      <li><a href="#">主頁</a></li>
      <li><a href="#">關於我們</a></li>
      <li><a href="#">聯繫我們</a></li>
    </ul>
    <div id="about" class="card">
      <h3>關於我們</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque,
        consequatur, illum maxime molestiae labore in necessitatibus qui,
        voluptas placeat officia
        <!-- span 不是塊級元素因此常常搭配p 標籤使用(不會造成強制換行) -->
        <span class="enhance"
          >dolorem sequi praesentium? Officiis consectetur</span
        >
        veniam doloremque excepturi repellat ducimus.
      </p>
    </div>
    <div id="contact" class="card">
      <h3>聯繫我們</h3>
      <ul>
        <li>地址:台北市中正南路一段XX號</li>
        <li>電話:02-1234567</li>
        <li>email:test@test.com</li>
      </ul>
    </div>
    <div id="main-footer">
      <p>Copyright &copy; 2000</p>
    </div>
  </body>
</html>