菜鳥工程師肉豬: HTML 段落元素Paragraph element <p>簡介

2019/7/13

HTML 段落元素Paragraph element `<p>`簡介

在HTML網頁的段落文字可使用段落元素(Paragraph elements)<p>來呈現。

在welcome.html使用<p>元素如下。

`welcome.html`

<!DOCTYPE html>
<html>
<head>
</head>
<body>

  <h1>您好，歡迎光臨</h1> <!-- 標題元素 -->
  
  <p>普通段落文字</p> <!-- 段落元素 -->

</body>
</html>

在Chrome瀏覽器顯示效果如下。

透過Chrome的開發人員工具，可以看到<p>預設CSS效果是Block；字體大小為1em（預設1em = 16px）；上下各有1em（16px x 1 x 1 = 16px）的邊界(margin)。

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

參考：

沒有留言:

訂閱：張貼留言 (Atom)