CODEWITHSUNDEEP
htmlcss
Oskar B
Oskar B

Reputation: 29

How to set height of element based on content

I have a problem to set height of element. I need to clickable dots but there is an invisible height of the elements that I can click too. I tried to set max-height but then it will move first element out of his range. Here is my example

nav {
  position: fixed;
  color: rgba(0, 0, 0, 0.7);
  z-index: 999;
  right: 5px;
}

nav>div {
  min-height: 10px;
  font-size: 3em;
  cursor: pointer;
}
<nav>
  <div>
    •
  </div>
  <div>
    •
  </div>
  <div>
    •
  </div>
  <div>
    •
  </div>
</nav>

Upvotes: 0

Views: 145

Answers (1)

Johannes
Johannes

Reputation: 67738

I suggest to use a different approach:

Create the dots as div with a set width, height, a background-color and 50% border-radius( to make them circles). Use top and bottom margins to create the vertical distance:

nav {
  position: fixed;
  color: rgba(0, 0, 0, 0.7);
  z-index: 999;
  right: 5px;
}

nav>div {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #000;
  margin: 30px 0;
  cursor: pointer;
}
<nav>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</nav>

Upvotes: 1

Related Questions