網頁

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;
}

參考:

沒有留言:

張貼留言