how do make the text far from the cirlce i tried padding and margin and it didn't work

Issue

enter image description here

I want the circle to be a bit far from the actual word but it’s stuck to it and i don’t know how to fix it.

here’s my code how can i fix it

HTML:

<div className="StudentNameBox">

    <div className="StudentName"><span class="dot"></span>Student Name</div>
    <div className="StudentName2"><span class="dot"></span>Student Name</div>

      </div>

CSS:

.dot {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid grey;
}



.StudentNameBox {
  width: 80%;
}

.StudentName {
  margin-top: 2vw;
  font-size: 1vw;
  margin-left: 4vw;
}

.StudentName2 {
  margin-top: 2vw;
  font-size: 1vw;
  margin-left: 4vw;
}

Solution

You need to add padding to the dot class.

.dot {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid grey;
  padding-left: 2vw;
}

Answered By – Polymer

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0