hr tag的使用

Posted on Edited on In Views: Disqus:

 

hr tag的使用

<html>
<body>
    <h1>HTML</h1>
    <p>HTML is a language for describing web pages.</p>
    <hr>
    <h1>CSS</h1>
    <p>CSS defines how to display HTML elements.</p>
</body>
</html>

上面的hr tag在chrome的預設格式為

hr {
  1. display: block;
  2. -webkit-margin-before: 0.5em;
  3. -webkit-margin-after: 0.5em;
  4. -webkit-margin-start: auto;
  5. -webkit-margin-end: auto;
  6. border-style: inset;
  7. border-width: 1px;
}

-webkit-margin-before的作用相當於margin-top

-webkit-margin-after的作用相當於margin-bottom

-webkit-margin-start的作用相當於margin-left

-webkit-margin-end的作用相當於margin-right

而也有人直接使用border-bottom來代替hr tag

例如

border-bottom:1px solid #DFDDD6