Как я могу заставить мою css рамку полностью обернуться вокруг моего html кода?

Question

У меня возникла проблема с рамкой вокруг моего текста HTML, используя CSS.

Как я могу получить границу до go вокруг текста вместо того, чтобы проходить через текст?

Мой HTML и CSS код следующий:

.header2 {
    position: relative;
    float: left;
    height: 75px;
    width: 1250px;
    background-color:white;
    left: 50px;
    top: 45px;
    margin-top: none;
    word-spacing: 25px;
    font-size: 14;
    border: 1px solid black;
    
}

<div class = "header2">  
   <h1>News</h1>
   <h2>
       <a href="#" class="H"><span>Home</span></a> 
       <a href="#" class="N"><span>Caronavirus</span></a>
       <a href="#" class="S"><span>Video</span></a> 
       <a href="#" class="R"><span>World</span></a>
       <a href="#" class="W"><span>US Canada</span></a> 
       <a href="#" class="T"><span>Uk</span></a> 
       <a href="#" class="F"><span>Business</span></a>
       <a href="#" class="C"><span>Tech</span></a> 
       <a href="#" class="M"><span>Science</span></a>
       <a href="#" class="M"><span>Stories</span></a>
       <a href="#" class="M"><span>More</span></a>
   </h2>
</div> 

В результате получается граница, прерывающая текст внизу, а не обтекающая его.

Answer 1

Вы определили height как 75px, что просто недостаточно высоко, т.е. выше, чем содержимое. Измените это значение на auto, чтобы автоматически настроить высоту (и вместе с ней границу) на содержание:

.header2 {
    position: relative;
    float: left;
    height: auto;
    width: 1250px;
    background-color:white;
    left: 50px;
    top: 45px;
    margin-top: none;
    word-spacing: 25px;
    font-size: 14;
    border: 1px solid black;

}

<div class = "header2">  
         <h1>News</h1>
         <h2>
             <a href="#" class="H"><span>Home</span></a> 
             <a href="#" class="N"><span>Caronavirus</span></a>
             <a href="#" class="S"><span>Video</span></a> 
             <a href="#" class="R"><span>World</span></a>
             <a href="#" class="W"><span>US Canada</span></a> 
             <a href="#" class="T"><span>Uk</span></a> 
             <a href="#" class="F"><span>Business</span></a>
             <a href="#" class="C"><span>Tech</span></a> 
             <a href="#" class="M"><span>Science</span></a>
             <a href="#" class="M"><span>Stories</span></a>
             <a href="#" class="M"><span>More</span></a>
         </h2>
</div>

Answer 2

Проблема в том, что высота вашего заголовка div является абсолютным значением (px), а 75px короче, чем ваши ссылки.

Границу, проходящую через ссылки, можно исправить, увеличив высоту класса заголовка. .

Например:

.header2 {
  position: relative;
  float: left;
  height: 120px;
  width: 1250px;
  background-color: white;
  left: 50px;
  top: 45px;
  margin-top: none;
  word-spacing: 25px;
  font-size: 14;
  border: 1px solid black;
}