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;
}

CodePudding user response：

Just add margin-right: 10px; to your .dot class. That should do the trick.

CodePudding user response：

Add margin-right for the .dot. This will give you extra space.

.dot {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  margin-right: 15px;
  display: inline-block;
  vertical-align: middle;
  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;
}

CodePudding user response：

You could use flex, not only can you create a gap between the elements, but you can also center the element, so it looks much cleaner.

.StudentName {
   margin-top: 2vw;
   font-size: 1vw;
   margin-left: 4vw;
   display: flex;
   gap: 1rem;
   align-items: center;
}

You don't need the .StudendName2 class because its just the same as .StudentName. Just apply the .StudentName class to the second element as well.

CodePudding user response：

I would do it this way, add a span wrapping student name:

.StudentNameBox .StudentName,StudentName2{
  display:flex;
  justify-content: flex-start
}

.StudentNameBox .StudentName,StudentName2 span{
  margin: 0 4px
}

<div className="StudentNameBox">

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

 </div>

CodePudding user response：

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;
}

CodePudding user response：

Use below code

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

CodePudding user response：

i used display flex to fix this also why are you putting a span tag as a direct shilf of a div that doesn't make sense

html code

<div className="StudentNameBox">
  <div class="student">
    <div class="dot"></div>
    <p>Student Name</p>
  </div>
</div>

css code

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

.student {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 20%;
}

.StudentNameBox {
  width: 80%;
}

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

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