How can you represent the difference between the HTML anchor(with inline-block) and the button as CSS properties?

user_1186624 0
Viewed 34

The HTML anchor(with the inline-block mode) and button aligns their contents vertically in different ways, as in the following example.

AAA
<a href='#' style='display:inline-block;width:100px;height:100px;text-align:center;background:green'>
    <span style='background:red'>BBB</span>
</a>
CCC

<br><br>

AAA
<button style='width:100px;height:100px;background:green'>
    <span style='background:red'>BBB</span>
</button>
CCC

I compared computed CSS properties of the anchor and button in the developer mode of Chrome, but could not find any properties related to the difference.

Is it possible to make an anchor to behave like a button by applying CSS properties, while keeping the inline-block mode? (I know it's possible by using the inline-flex mode.)

And if it's not possible, does that mean there are some hidden layout rules in the HTML rendering that cannot be controlled by CSS?

css html
1 Answers

You can consider inline-flex to keep the same behavior and then simply center the content

AAA
<a href='#' style='display:inline-flex;align-items:center;justify-content:center;width:100px;height:100px;text-align:center;background:green'>
    <span style='background:red'>BBB</span>
</a>
CCC

<br><br>

AAA
<button style='width:100px;height:100px;background:green'>
    <span style='background:red'>BBB</span>
</button>
CCC

Related:

Which magic CSS causes the difference of text-vertical-align between <button> and <div>?

What makes the text on a <button> element vertically centered?

user_86203330
Related