Why inside form button size and outside form button size is different after same style?

Question

Style is same but inside form button size and outside form button size is not same. Outside form button text-content apply extra padding around it. Same issue with a tag. Why this is happening? How to solve it? Also for button user agent stylesheet override my font. How to fix it?

 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap'); * { padding: 0; margin: 0; box-sizing: border-box; } body, html { font-family: 'Noto Sans JP', sans-serif; font-size: 16px; color: #333; }.container { margin: 30px auto; padding: 25px; border: 1.5px solid #e6e6e6; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15); border-radius: 6px; } a { text-decoration: none; }.btn { background-color: #fff; font-size: 0.9em; font-weight: 700; padding: 10px 22px; border-radius: 5px; }.btn--orange { color: #e99d0f; border: 1px solid #e99d0f; }.btn--red { color: #ff2727; border: 1px solid #ff2727; }.section-info { width: 60%; }.section-info img { width: 100%; margin-top: 10px; }.section-info__nav { display: -webkit-box; display: flex; margin-top: 10px; }.section-info a { margin-right: 10px; }

 <section class="container section-info"> <div class="section-info__nav"> <a href="#" class="btn btn--orange">Edit</a> <button class="btn btn--red">Delete</button> <form action="#" method="POST"> <button class="btn btn--red">Delete</button> </form> </div> </section>

Answer 1

because your form is not flex.you should just add cod below in your form css:

display: flex;

Answer 2

In the first look, it could be a bit confusing but if you look at the style inheritance with more attention you will find out a little difference between them.

Lets get into it step by step

As we can see there is display: flex; attribute within the provided style.

.section-info__nav {
  display: -webkit-box;
  display: flex;
  margin-top: 10px;
}

As we know flex will only affect the direct children of a div , so here what we got:

<a href="#" class="btn btn--orange">Edit</a>
<button class="btn btn--red">Delete</button>
<form action="#" method="POST">
  ...
</form>

There are three direct children to the provided div ( a , button , form ). The other button within the form won't take effect of the flex display since the form itself got display block by default.

Why this is happening at all?

As we know flex display in the default situation will stretch the content to match the exact height (There is 44px available in section-info__nav , so each button height with display flex will be 44px ). But when we got a display block , all items with this kind of display will put in the document just by their normal form and size , so since the button class is:

.btn {
  background-color: #fff;
  font-size: 0.9em;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 5px;
}

the sum of the padding , border , and font-size will be 34px ( 10px lower than actually available height in the div ). So the button will add at the beginning of div and in comparison with other buttons, it will look likes a dumb.

NOTE: In order to prevent items from fitting the entire available space in your div you can control them by align-items attribute. But in your particular case, since <a> don't have a default line-height attribute you should add specific line-height attribute to your .btn class in order to align all of your items properly.

How to fix this?

Simply add flex display to your form like this:

form {
  display: flex;
}