Làm việc với Display Block trong CSS

Thuộc tính CSS display với giá trị block hiển thị phần tử với toàn bộ chiều rộng của phần tử cha, và nó cũng ép buộc ngắt dòng (line break). Phần tử với display: block hiển thị tương tự như phần tử <div> hoặc <p>.

Cú pháp

Selector {
  display: block;
}

Ví dụ 1: Chuyển thẻ em thành block

<!DOCTYPE html>
<html>
<head>
<title>CSS Display Block</title>
<style>
  form { width: 70%; margin: 0 auto; text-align: center; }
  * { padding: 2px; margin: 5px; }
  input[type="button"] { border-radius: 10px; }
  em { background-color: #C303C3; color: #fff; display: block; }
</style>
</head>
<body>
  <form>
    <fieldset>
      <legend>CSS-Display-Block</legend>
      <label for="textSelect">Formatter: </label>
      <input id="textSelect" type="text" placeholder="John Doe">
      <input type="button" onclick="convertItalic()" value="Check">
      <div id="divDisplay"></div>
    </fieldset>
  </form>
  <script>
    var divDisplay = document.getElementById("divDisplay");
    var textSelect = document.getElementById("textSelect");
    function convertItalic() {
      for (i = 0; i < 2; i++) {
        var italicObject = document.createElement("EM");
        var italicText = document.createTextNode(textSelect.value);
        italicObject.appendChild(italicText);
        divDisplay.appendChild(italicObject);
      }
    }
  </script>
</body>
</html>

Kết quả

Trước khi nhấn 'Check':

Sau khi nhấn 'Check' - mỗi <em> hiển thị trên một dòng riêng, chiếm toàn bộ chiều rộng:

Ví dụ 2: So sánh các giá trị display trong cấu trúc lồng nhau

<!DOCTYPE html>
<html>
<head>
<style>
  #flex { display: flex; }
  #none { display: none; }
  .inline-block { display: inline-block; background-color: mintcream; }
  .grid { display: grid; background-color: cornflowerblue; }
  div { margin: 30px; padding: 5px; height: 10px; line-height: 5px; text-align: center; background-color: lightblue; border: 2px solid black; }
  div > div { background-color: lightpink; border: 2px solid green; }
  div > div > div { background-color: sandybrown; border: 2px solid darkred; }
</style>
</head>
<body>
  <div><span id="flex">heyyy</span>
    <div><span id="none">heyyy</span>
      <div>
        <span class="inline-block">heyyy</span>
        <span class="inline-block">heyyy</span>
        <div>
          <span class="grid">heyyy demo</span>
          <span class="grid">heyyy demo</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Kết quả

Đặc điểm của display: block:

• Chiếm toàn bộ chiều rộng container cha (width: 100%)
• Bắt đầu trên dòng mới, kết thúc bằng ngắt dòng
• Có thể thiết lập width, height, margin, padding
• Có thể chứa cả block và inline elements
• Phần tử mặc định block: div, p, h1-h6, section, article, header, footer, form, ul/ol

Phần tử inline mặc định có thể biến thành block: span, a, img, strong, em bằng cách đặt display: block.