Menu
In this simplified example I have 4 circles, each with varying border-width and I am trying to maintain equal line height in each to keep them horizontally aligned.
However the border width seems to effect the line height (despite being technically outside the box?)
Is there anyway to solve this without manually adjusting each line-height?
width: 50px;
height: 50px;
border-radius: 50px;
border: 1px solid #1daeec;
line-height: 50px;
Example: http://jsfiddle.net/vcJ3G/
223
border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width.
With the CSS box-sizing Property The box-sizing property allows us to include the padding and border in an element's total width and height. If you set box-sizing: border-box; on an element, padding and border are included in the width and height: Both divs are the same size now!
Yes, borders take up physical space. So, if you set a div to be 100%, then give it a 1px border, it will be 2px wider than the container it is in.
You can remove the line-height, use display:table-cell instead, and add vertical-align:middle; to your stat class.
jsFiddle example
.stat {
display: table-cell;
width: 50px;
height: 50px;
border-radius: 50px;
border: 1px solid #1daeec;
text-align: center;
margin: 10px;
font-size: 16px;
color: #1daeec;
text-transform: uppercase;
vertical-align:middle;
}
Your css works fine all you have to do is remove some from top section
* {
margin: 0px;
padding: 0px;
}
http://jsfiddle.net/techsin/vcJ3G/15/
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
