Problem with aligning small shapes in css

Question

I'm pretty new in CSS but I couldn't find similar question on stackoverflow. I try to model a radio button like on a drawing below:

I've made it as follow:

.root {
  display: flex;
}

.checkbox {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border-color: blue;
  border-width: 0.2;
  border-style: solid;

  display: flex;
  justify-content: center;
  align-items: center;
}

.mark {
  width: 1.1rem;
  height: 1.1rem;
  background-color: blue;
  border-radius: 50%;
}

<body>
<div class="root">
  <div class="checkbox">
    <div class="mark"></div>
  </div>
  <div class="checkbox">
    <div class="mark"></div>
  </div>
  <div class="checkbox">
    <div class="mark"></div>
  </div>
  <div class="checkbox">
    <div class="mark"></div>
  </div>
  <div class="checkbox">
    <div class="mark"></div>
  </div>
</div>
</body>

I'm using MacBook Pro, with Chrome and Safari.

On Chrome it looks like this:

On Safari it looks a little bit better, but the problem still occurs (look at the bottom of each icon).

Can anyone help me to explain what am I doing wrong?

I suggest and easier way with only one element and some background trick: stackoverflow.com/a/55642264/8620333 — Temani Afif
– Temani Afif, Commented Jun 8, 2019 at 21:22

weegee · Accepted Answer · 2019-06-08 13:53:39Z

1

First of all, if you want fixed shape and sizes. Use px instead of em and % because they scale according to the document. For instance, em is equal to the current font size. Because of the unit, you were getting irregularities. For more information read this article

.root {
  display: flex;
}

.checkbox {
  width: 20px;
  /* fixed width */
  height: 20px;
  /* fixed height */
  border-radius: 50%;
  border-color: blue;
  border-style: solid;
  margin-left: 10px;
  /* fixed left margin to keep every checkbox element a 10px from left to the next one */
  display: flex;
  justify-content: center;
  align-items: center;
}

.mark {
  width: 14px;
  /* fixed width; */
  height: 14px;
  /* fixed height; */
  background-color: blue;
  border-radius: 50%;
}

<body>
  <div class="root">
    <div class="checkbox">
      <div class="mark"></div>
    </div>
    <div class="checkbox">
      <div class="mark"></div>
    </div>
    <div class="checkbox">
      <div class="mark"></div>
    </div>
    <div class="checkbox">
      <div class="mark"></div>
    </div>
    <div class="checkbox">
      <div class="mark"></div>
    </div>
  </div>
</body>

We now have fixed divs with fixed sizes. We added margin-left to add the spacing between each checkbox element. Which is shown in the image. Inside divs, the mark element. The flex causes the inside divs to align vertically and you have your desired behavior with cross-platform support.

You can edit these values to get the desired result which you want.
To fix what you have in the comment below. It is because of the flex. To fix that we have to use '%' values on the child. So they scale according to the parent and the flex does not interfere. To do this just set the width's and height's like

.root {
  display: flex;
}

.checkbox {
  width: 20px;
  /* fixed width */
  height: 20px;
  /* fixed height */
  border-radius: 50%;
  border-color: blue;
  border-style: solid;
  margin-left: 10px;
  /* fixed left margin to keep every checkbox element a 10px from left to the next one */
  display: flex;
  justify-content: center;
  align-items: center;
}

.mark {
  width: 90%;
  /* fixed width; */
  height: 90%;
  /* fixed height; */
  background-color: blue;
  border-radius: 50%;
}

<body>
  <div class="root">
    <div class="checkbox">
      <div class="mark"></div>
    </div>
    <div class="checkbox">
      <div class="mark"></div>
    </div>
    <div class="checkbox">
      <div class="mark"></div>
    </div>
    <div class="checkbox">
      <div class="mark"></div>
    </div>
    <div class="checkbox">
      <div class="mark"></div>
    </div>
  </div>
</body>

edited Jun 8, 2019 at 13:53

answered Jun 8, 2019 at 13:30

weegee

3,4382 gold badges22 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

LukaszTaraszka Over a year ago

Not necessary. Look at your example with mark width set to 17px. codepen.io/ukasz-taraszka/pen/QReqJr (Chrome). Is it something wrong with the web browser pixels displaying? It looks like there is an odd number of pixels in works wrong on Chrome.

weegee Over a year ago

No, I didn't meant that @LukaszTaraszka. It is happening because of flex. You increased the width and the flex adjusts.

LukaszTaraszka Over a year ago

You may be right. There is one small detail. How can you explain that when I use 18px width and height for inner circle everything is working properly, but when I use 15px or 17px everything looks bad? I'm quite sure that Chrome web browser has a problem with displaying fractional part of pixels. What do you think?

weegee Over a year ago

Well, can you provide a codepen of the behaviour you are saying is looking bad? It's mostly because of the flexbox.

LukaszTaraszka Over a year ago

Sure, I've already provided it: codepen.io/ukasz-taraszka/pen/QReqJr . Zoom it on Chrome, and you will see that the right bottom part of the inner circle is closer to edge on root circle. When you set the inner circle size to an odd value, it will work properly.

|

Collectives™ on Stack Overflow

Problem with aligning small shapes in css

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related