The heght of the <a class="ui label">Testing</a> is 26px whereas <a class="ui basic label">Basic</a> has a height of 28px
Both labels should have the same height. Since the size is mentioned using a different property.
Is it intentional? Shouldn't be they have the same height?
https://codesandbox.io/s/quiet-surf-w7upu?file=/index.html
2.8.4
A label does not have a height property. It's height is calculated by the used font size.
Infact both label variants have the same/no height and the same padding. However, basic labels have a border, which adds 2 pixel to the overall height.
That's intentional for the default theme.
You can of course override this behavior for example by the following
.ui.basic.label {
padding-top: calc(.5833em - 1px);
padding-bottom: calc(.5833em - 1px);
}
I thought a long time about this again and finally decided its more a bug than an intentional feature.
That said, #1507 will fix this
Thanks
Most helpful comment
A label does not have a
heightproperty. It's height is calculated by the used font size.Infact both label variants have the same/no height and the same padding. However, basic labels have a border, which adds 2 pixel to the overall height.
That's intentional for the default theme.
You can of course override this behavior for example by the following