Circle Goes Outside Of Parent Div

I have a circle and the right and bottom part of the circle extend slightly outside the parent div.Why is this? How can I fix this?

Solution 1:

We can fix everything with just one line:

add box-sizing: border-box to .player-thumb:

.player-holder {
  height: 100px;
  max-width: 100px;
  min-width: 50px;
}

.player-thumb {
  box-sizing: border-box;
  margin: auto;
  height: 100%;
  min-width: 50px;
  width: 100px;
  border-radius: 100%;
  border: 1px solid #ccc;
  overflow: hidden;
  background-color: #f8f8f8;
  background-image: url("chat-icon.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50px;
}

<divclass="player-holder"><ahref="#"><divclass="player-thumb"></div></a></div>

Since no-one explained why it is happening, here is the explanation on what is going on:

In CSS there is a property called box-sizing (Documentation on MDN), which defines how the dimensions of an element are calculated. There are three options;

• content-box
• padding-box
• border-box

Note: I'm omitting initial and inherit, because they depend on default values or parent values.

The image below shows you what the options capture:

Source (Image re-uploaded at Stack Overflow, because direct link didn't work)

Content-box is the default, which means whenever you define a width and height, the padding and border sizes are not included in those sizes.

Lets say you define a div which has a height of 100 pixels, the padding-top is 30 pixels and there is a border at the bottom that's 10 pixels:

.random_div {
    height: 100px;
    padding-top: 30px;
    border-bottom: 1px solid #FFFFFF;
}

Now we'll have to choose a setting for box-sizing:

Content-box:

When you wouldn't change the box-sizing, the div would get a total height of 140 pixels (100 + 30 + 10).

Padding-box:

When you set box-sizing to padding-box, the div would get a total height of 110 pixels (100 + 10). This is because padding is now included in the 100 pixels of height. This leaves you with 70 pixels of space for content.

Border-box:

When you set box-sizing to border-box, the div would get a total height of 100 pixels. All the sizes are included into the height of the div.

Which one you use is up to you. I usually set most of my elements to border-box, because that works for me.

Solution 2:

You have the circle border and so the actual circle width will be of 102px;

See this pen to see how it behaves:

If you need the circle border, then add 2px to the parent div. Also check the circle height;

.player-holder {
    height: 100px;
    max-width: 102px;
    min-width: 50px;
    background-color: red;
}

.player-thumb {
    margin: auto;
    height: calc(100% - 2px);
    min-width: 50px;
    width:100px;

    border-radius: 100%;
    border: 1px solid #ccc;

    overflow: hidden;
    background-color: #f8f8f8;
    background-image: url("chat-icon.png");
    background-repeat: no-repeat;
    background-position: center center;

    background-size: 50px;
}