如何仅概述HTML中的元素

Question

I have this:

< h1 style="position: relative; top: -103px; left: 700px; border-width: thin; border-style: dotted; border-color: grey;">
< small>Three Stars Of The Week</small>
</p>

It gives me a heading with a grey dotted line that ends way past the heading ends. It goes to the end of the page.

How do I fix it so that the border goes only around the letters, not all the way to the end of the page?

Answer 1

h1 is a block-level element, so this is expected behavior. Put its content in an inline element (such as span ) and style that instead.

Answer 2

It is obvious since <h> (header 1 to 6) tags are block elements so it will take from the start to end of the page. Try using display:inline-block . Something like this

Your CSS class

.head-class{
  position:relative; 
  top: -103px; 
  left: 700px; 
  border-width: thin; 
  border-style: dotted; 
  border-color: grey;
  display:inline-block; /* style to make element as inline but block */
}

Your element

< h1 class="head-class"><small>Three Stars Of The Week</small></h1><br>