Why does an internal alignment of a button button differ from a link a, even using the same class?

Question

Why does an internal alignment of a button button differ from a link a, even using the same class?

Navigation

#1 by (0 votes)

10

Well, I created a class called .btn , where I wanted to use it for both button and a . So I forced some things in this class to reset the original style of both button and a .

For example, in a I removed text-decoration . In button , I forced the change from background to border . So far so good.

The problem is that I'm noticing that the button element, even using -webkit-appearence: none , behaves differently in relation to the alignment of the internal text, as tested below:

.btn{
    border: 1px solid transparent;
    padding: 10px 20px;
    box-shadow: 0 1px 2px 0px #666;
    outline: none;
    border-radius: 4px;    
    background-color: #efefef;
    cursor: pointer;
    transition: box-shadow .1s ease-out, border-color .3s linear;
    font-weight: bold;
    box-sizing: border-box;
    vertical-align: top;
	  display: inline-block;
	
    min-height: 55px;
    font-size: 14px;
	  
	  text-decoration: none;
	  color: #222;
	  background-image: none;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: Arial;

}

<button class="btn">
  Eu sou um &lt;Button&gt;
</button>

<a class="btn">
    Eu sou um &lt;A&gt;
</a>

I'm going to put the image too, to show how the rendering in my Google Chrome was:

Now,myquestionis:

Whatpropertycausesbuttontoaligntextinthemiddle,whileadoesnot?
Isthereawaytoresetthisdefaultalignmentofbutton?Myintentionwastomakethetwocentralized,butmoreimportantly,Iwanttoknowifthereisapropertyofbuttonmadealignedtothecenter.

Note:Thequestionisnotjusttoknowhowtoalignthetexttothecenter,buttoknowindepthaboutwhatcausedthedifferencementionedabove,sinceIusedthesamestyleforeveryone.

Note2:Icoulduseinline-flexandmatchjustify-content:center;align-itens:center,butthat'snottheanswerIwant,sinceI'malreadyputtingitinthequestion.Iwanttoknowspecificallyaboutthedetailspresentedabove,notjusta"support for the alignment problem"

html5 css

asked by anonymous 01.08.2018 / 14:48

1 answer

Left Join or Not Exists How to remove accent in upload with php?

score 0 · Answer 1

Updated - 08/11/2018

After much research despite understanding the question in various ways I researched and got a more plausible answer with sources for your question.

The answer is from the Cubed Eye Stack overflow user.

Firstly, the main issue here is that <button> at least in Firefox are built with an inner element between the <button> tag and its children. In Firefox it's called moz-button-content is not something that can be achieved with CSS and was set to display the block without inheriting the height of the button, you can see this style declaration in useragent style sheet .

Browser by default is already coded to center the contents of the button vertically.

With these two issues you can begin to see how the button forces content to be centered, consider:

<button>

+------------------------+ ^
| button extra space     | |
|                        | |
+------------------------+ |
|| ::moz-button-content || | button height
||   display: block;    || |
+------------------------+ |
|                        | |
| button extra space     | |
+------------------------+ v

There is a workaround for the problem if you really want to change the default behavior, but this does not completely resolve the problem depending on your implementation.

If you insert a wrapper <span> with display: block the only child of the button and put all its content in it, you can use it to skip the moz-button-content element.

You will need to make this <span> element have height: inherit correctly filled the height of the button and then add your normal button style to <span> instead you will basically get the desired behavior.

* {
box-sizing: border-box;
margin: 0;
border: 0;
padding: 0;
font-family: san-serif;
background: none;
font-size: 1em;
line-height:1;
vertical-align: baseline;
}

button, a {
height: 3em;
}

button {
background: red;
}
button::-moz-focus-inner {
border: 0;
padding: 0;
outline: 0;
}

button > span {
display: block;
height: inherit;
}

a {
display:inline-block;
background: green;
}



button.styled > span , a.styled{
padding: 10px;
background: yellow;
}

<button>
<span>Button content</span>
</button>

<a>
<span>Link Content</span>
</a>

<br/>
<br/>

<button class="styled">
<span>Button content</span>
</button>

<a class="styled">
<span>Link Content</span>
</a>

You should use one in <span> of a <div> , as div are not valid children for <button> .