Почему эти две кнопки не имеют одинакового размера?

Question

У меня есть две кнопки на двух страницах, и они должны выглядеть точно так же, но они этого не делают. Они также имеют одинаковый стиль CSS. Я считаю, что одна из кнопок уплотняется объектами вокруг нее, но я не могу определить, какая часть ее вызывает. Если бы вы могли помочь мне найти решение с дополнительным битом CSS или объяснить мне, какую часть я должен удалить?

EDIT: Извините, я точно не уточнил. Размер этих кнопок отличается. Это не имеет никакого отношения к краям кнопок, но, ради аргумента, я удалю эти части встроенными. Кнопки двух разных размеров размеров, что и является моей проблемой.

Эта кнопка выглядит правильно:

.submitbutton { 
 
    display: block; 
 
    /* inline for text and button */ 
 
    border: 0.1em; 
 
    border-radius: 0.5em; 
 
    background-color: #e6e5e5; 
 
    width: 14em; 
 
    height: 3.5em; 
 
    outline-color: #C0C0C0; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: #84A0B1; 
 
    font-size: 0.7em; 
 
}

<div style="display: -webkit-flex; -webkit-align-items: center; display: flex; align-items: center;"> 
 
    <div style="-webkit-flex: 1; flex: 1; display: block; margin-left: 1.5em; min-width: 13em"> 
 
    <h3 class="locations" style="display: block" ">dana point</h3> 
 
          <p class="locations " style = "display: block ">34241 E. Pacific Coast Hwy, Ste. 201 <br> Dana Point, CA 92629 </p> 
 
         </div> 
 
         <button type="button " class="locations submitbutton " name="danaPoint " id = "dana point "><span class = "buttonText ">select</span></button> 
 
      \t \t  </div>

Эта кнопка неправильно отформатирован:

.submitbutton{ 
 
    
 
    display: block; /* inline for text and button */ 
 
    
 
    border: 0.1em; 
 
    border-radius: 0.5em; 
 
    background-color: #e6e5e5; 
 
    width: 14em; 
 
    height: 3.5em; 
 
    outline-color: #C0C0C0; 
 
    
 
    
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: #84A0B1; 
 
    font-size: 0.7em; 
 
}

<div style = "margin-left: 1em; font-size: 0.8em; margin-right: 2em; display: -webkit-flex; -webkit-align-items: center; display: flex; align-items: center;"> 
 
      \t \t   <i style = "margin: 0.5em" class="fa fa-credit-card" aria-hidden="true"></i><p style = "margin: 0.9em">$49 </p> 
 
         <i style = "margin: 0.5em" class="fa fa-clock-o" aria-hidden="true"></i><p style = "margin: 0.5em; min-width: 4em"> 20m</p> 
 
         <button type="button" class="sugars submitbutton hidden" name="brazilian" ><span class = "buttonText">find a time</span></button> 
 
        </div>

Также, пожалуйста, дайте мне знать, если есть способ, которым я могу сделать этот вопрос лучше, поскольку я ранее занимался вопросами, задающими вопросы правильно, и на этот раз я старался следовать рекомендациям.

Спасибо!

Answer 1

.submitbutton{ 
 
    
 
    display: block; /* inline for text and button */ 
 
    
 
    border: 0.1em; 
 
    border-radius: 0.5em; 
 
    background-color: #e6e5e5; 
 
    width: 14em; 
 
    height: 3.5em; 
 
    outline-color: #C0C0C0; 
 
    
 
    
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: #84A0B1; 
 
    font-size: 0.7em; 
 
}

<!-- The buttons were showing differently because of the inline-styles within the html are different--> 
 
<!-- I change the inline styles so the buttons show as the same--> 
 

 
<div id="first-btn"> 
 
    
 
    <div style = "margin-left: 1em; <!--font-size: 0.8em;--> margin-right: 2em; display: -webkit-flex; -webkit-align-items: center; display: flex; align-items: center;"> 
 
      \t \t   <i style = "margin: 0.5em" class="fa fa-credit-card" aria-hidden="true"></i><p style = "margin: 0.9em">$49 </p> 
 
         <i style = "margin: 0.5em" class="fa fa-clock-o" aria-hidden="true"></i><p style = "margin: 0.5em; min-width: 4em"> 20m</p> 
 
         <button type="button" class="sugars submitbutton hidden" name="brazilian" style = " width: 10em; margin-right: 2em; margin-left: auto" ><span class = "buttonText">find a time</span></button> 
 
        </div> 
 
</div><!--/ #first-btn --> 
 

 
<div id="second-btn"> 
 
    <div style="display: -webkit-flex; -webkit-align-items: center; display: flex; align-items: center;"> 
 
    <div style="-webkit-flex: 1; flex: 1; display: block; margin-left: 1.5em; min-width: 13em"> 
 
    <h3 class="locations" style="display: block" ">dana point</h3> 
 
          <p class="locations " style = "display: block ">34241 E. Pacific Coast Hwy, Ste. 201 <br> Dana Point, CA 92629 </p> 
 
         </div> 
 
         <button type="button " style = "width: 10em; margin-right: 2em " class="locations submitbutton " name="danaPoint " id = "dana point "><span class = "buttonText ">select</span></button> 
 
      \t \t  </div> 
 
</div><!--/ #second-btn-->

Answer 2

У вас есть две разные встроенного стиля

от первого

style = "width: 10em; margin-right: 2em " 

от второго

style = "margin-right: 1em; margin-left: auto" 

встроенного стиля переопределить стиль CSS в ваших внешних файлов или секции стиля