Text not staying in border?

user_15298474 0
Viewed 52

I am making a website for a school project and i'm trying to make the height of a border fit the size of the text. however, whenever i adjust the height the text doesn't go with it and i'm not sure how to fix this. Code: 

#slidercompare {
  font-size: 17px;
  font-family: sans-serif;
  border-style: solid;
  border-color: grey;
  opacity: 87%;
  position: absolute;
  top: 5px;
  right: 10px;
}
#slidercompare {
  width: 355px;
  height: 40px; /* for some reason I can't adjust the height smaller than this or else the border goes through the text. */
  color: white;
  background-color: black;
}
<html>
<head>
  <link rel="stylesheet" href="css/boardgames.css">
</head>
<body>
    <h1 id="slidercompare"><br>Chess.com (left) vs Video Chess (right)</h1>
</body>
</html>
Any ideas? Thanks

css html
2 Answers

I inserted <br> to <h1>. Used that to seperate a thing earlier i dont need to seperate now. So, removing the <br> tag fixed the issue.

user_152984740

May this be what you are trying to achieve?

#slidercompare {
  font-size: 17px;
  border-style: solid;
  border-color: grey;
  opacity: 87%;
}

#slidercompare {
  width: fit-content;
  color: white;
  background-color: black;
}
<h1 id="slidercompare">Chess.com (left) vs Video Chess (right)</h1>

user_153497380
Related