1

Am I correct that if I have specified width of an HTML element (eg a button) to keep the width fixed then I do not need to specify box-sizing as long as I have used only padding-top and padding-bottom properties? I want to create fixed-width buttons. I found that following two approaches gives the same result. I am new to css. I want to be sure that I have understood the concept correctly and am not missing any corner cases.

approach 1: create a fixed width button. Not using sizing with padding-top and padding-bottom properties.

.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;

}

approach 2: create a fixed width button. Use box-sizing with padding property

.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;  
}
Kamil Naja
  • 6,267
  • 6
  • 33
  • 47
Manu Chadha
  • 15,555
  • 19
  • 91
  • 184
  • if you could please post a fiddle or pen of this code in situe with corresponding html that'd be great – Rob Hern Jan 05 '18 at 09:35
  • 1
    well i would say both are correct for specifying the size BUT you won't have the same inside space for your text, so if text is bigger you will not have the same behavior – Temani Afif Jan 05 '18 at 09:43

1 Answers1

0

In your case both are right, but when you put padding from left and right or put some border it will increase your button width or height when using box-sizing property with default value content-box. I mean it will exceed your width or height which you are defined when using box-sizing property with default value content-box.

Check out this link, you will be clear https://css-tricks.com/box-sizing/

Nav Raj Bhattarai
  • 400
  • 1
  • 2
  • 10