Правильно ли я понимаю, что для создания элемента с фиксированной шириной мне не нужно использовать размер блока, если свойство заполнения не используется

Question

Правильно ли это, если я указал width элемента HTML (например, button) чтобы сохранить ширину фиксированной, мне не нужно указывать box-sizing пока я использовал только padding-top а также padding-bottom свойства? Я хочу создать кнопки фиксированной ширины. Я обнаружил, что следующие два подхода дают одинаковый результат. Я новичок в CSS. Я хочу быть уверенным, что я правильно понял концепцию и не пропускаю ни одного углового случая.

подход 1: создать кнопку фиксированной ширины. Не использовать проклейку с padding-top а также padding-bottom свойства.

.button-common-styles-normal{
    background: radial-gradient(ellipse,#268ff4 5%,#4da3f8 95%); 
    border:none;
    color:white;
    border-radius: 8px;
    width:200px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;

}

подход 2: создать кнопку фиксированной ширины. использование box-sizing с padding имущество

.button-common-styles-normal{
    background: radial-gradient(ellipse,#268ff4 5%,#4da3f8 95%); 
    border:none;
    color:white;
    border-radius: 8px;
    width:200px;
    box-sizing: border-box;
    text-align: center;
    padding: 10px;  
}

Answer 1

В вашем случае оба являются правыми, но когда вы поместите отступ слева и справа или поставите некоторую границу, это увеличит ширину или высоту вашей кнопки при использовании свойства box-sizing со значением content-box по умолчанию. Я имею в виду, что он будет больше вашей ширины или высоты, которые вы определили при использовании свойства box-sizing со значением content-box по умолчанию.

Проверьте эту ссылку, вам будет ясно https://css-tricks.com/box-sizing/