CODEWITHSUNDEEP
htmlcss
AmirReza Hosseini
AmirReza Hosseini

Reputation: 79

3 div with the same css, but they're not the same height

look at this photo my point is to make something like left window, but it ended up as what you can see in right photo. 3 div with the same css code, but they have different height.

span div {
    background: #262626;
    height: 1.5px;
    width: 20px;
    margin-top: 6px;
    border-radius: 15%;
}
<span>
    <div></div>
    <div></div>
    <div></div>
</span>

Upvotes: 1

Views: 186

Answers (3)

Soothran
Soothran

Reputation: 1243

You are using fractional values in px unit for height. change it to integer value. It will work.

span div {
  background: #262626;
  height: 2px;
  width: 200px;
  margin-top: 6px;
  border-radius: 15%;
}
<span>
    <div></div>
    <div></div>
    <div></div>
</span>

UPDATE

AFAIK fractional pixels or sub-pixels are rounded or considered differently in different browsers. In chrome, it should display these divs with equal height. but it may vary according to screen size.

Run the below snippet and try to zoom-in the screen, you will see at some point these divs are having equal height. But at another zoom levels divs will display with uneqaul heights.

More info: Sub-Pixel Problems in CSS 

span div {
  background: #262626;
  height: 1.5px;
  width: 100px;
  margin-top: 6px;
  border-radius: 15%;
}
<span>
    <div></div>
    <div></div>
    <div></div>
</span>

Upvotes: 4

Rupal
Rupal

Reputation: 1109

Height doesn't work in decimals. Some browser covert it to round off but all browsers have a different strategy when rounding sub-pixel percentages. So use it integer. Also detailed explaination are here

span div {
    background: #262626;
    height: 3px;
    width: 20px;
    margin-top: 6px;
    border-radius: 15%;
}
<span>
    <div></div>
    <div></div>
    <div></div>
</span>

Upvotes: 3

Hossein Zare
Hossein Zare

Reputation: 580

It happens because 1.5px is very small to be shown on the screen. Make it 2px.

span div {
    background: #262626;
    height: 2px; /* changed to 2px */
    width: 20px;
    margin-top: 6px;
    border-radius: 15%;
}

Upvotes: 1

Related Questions