When styling a clickable button, should I be using padding, width and height, or both?
yes - and a number of other things as well
yes, meaning what?
yes you should be using them
Hi there asasass,
if you look at the CSS in the attachment toâŚ
,you will see how to style a button, be it clickable or otherwise. 
coothead
Whatâs the difference between using padding and using width/ height, cause I donât see a difference?
Width / Height:
vs.
Padding:
They are completely different things - presumably they just look the same to you because of your specific browser settings - they will certainly look very different for most other people.
Why donât you actually go away and learn HTML and CSS rather than expecting everyone here to keep answering all the meaningless questions you keep asking here about the JUNK you keep writing instead of HTML.
2 Likes
How do they look different to you in your browser? Can I see pictures?
Neither of them is showing any content so it is impossible to say what they will look like when coded properly.
I see a colored box that changes color when you click on it, I donât know what youâre seeing.
well until you add content to that box you are not going to see the difference between the padding and the width/height
anyway, why would anyone click on it - it is just a coloured box that would be assumed to be a part of the background
no kidding. So, what if I donât want to put content in it?
No content in box means stay with. Width/Height
Add content to the box, use padding?
so define it entirely in CSS as it is just a background and shouldnât be a part of the HTML at allâŚ
1 Like
If the box is a fixed width and height and holds no fluid content (such as text) then yes sets its dimensions in css (preferably in ems).
If the box holds content such as text then donât set a height but let content dictate the height so that the element can grow with text-zoom and handle when content wraps to a new line as you never know how much text will fit in one line cross browser.
3 Likes
Iâm beginning to think you are being deliberately perverse here, as it has already been explained to you quite clearly what each of these does.
Does anyone know of any site what converts width, height into padding?
Does anyone know of any site what converts width, height into padding?
Does anyone know of any site what converts width, height into padding?
Setting width and/or height
HTML
<div class="one">
<p>The width property sets the width of the content box. The height property sets the height of the content box. The padding property adds padding to the content box, inside its border.</p>
</div>
<div class="two">
<p>The width property sets the width of the content box. The height property sets the height of the content box. The padding property adds padding to the content box, inside its border.</p>
</div>
<div class="three">
<p>The width property sets the width of the content box. The height property sets the height of the content box. The padding property adds padding to the content box, inside its border.</p>
</div>
<div class="four">
<p>The width property sets the width of the content box. The height property sets the height of the content box. The padding property adds padding to the content box, inside its border.</p>
</div>
CSS
p {font-family: Verdana, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
color: #000;
background-color: #fff;
border: 1px dotted;
}
div {background-color: #BFDFFF;
border: 1px solid #0000FF;
margin-bottom: 5px;
}
.two {width: 200px;}
.three {height: 100px;}
.four {width: 200px;
height: 100px;
}
Results (browser maximised at 1280px)
Setting padding on the <div>, the <p> or both
HTML
<div class="five">
<p>The width property sets the width of the content box. The height property sets the height of the content box. The padding property adds padding to the content box, inside its border.</p>
</div>
<div class="six">
<p>The width property sets the width of the content box. The height property sets the height of the content box. The padding property adds padding to the content box, inside its border.</p>
</div>
<div class="seven">
<p>The width property sets the width of the content box. The height property sets the height of the content box. The padding property adds padding to the content box, inside its border.</p>
</div>
CSS
p {font-family: Verdana, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
color: #000;
background-color: #fff;
border: 1px dotted;
}
div {background-color: #BFDFFF;
border: 1px solid #0000FF;
margin-bottom: 5px;
}
.five {padding: 25px;}
.six p {padding: 25px;}
.seven, .seven p {padding: 25px;}
Result
Setting width and padding
HTML
<div class="eight">
<p>The width property sets the width of the content box. The height property sets the height of the content box. The padding property adds padding to the content box, inside its border.</p>
</div>
<div class="nine">
<p>The width property sets the width of the content box. The height property sets the height of the content box. The padding property adds padding to the content box, inside its border.</p>
</div>
<div class="ten">
<p>The width property sets the width of the content box. The height property sets the height of the content box. The padding property adds padding to the content box, inside its border.</p>
</div>
CSS
p {font-family: Verdana, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
color: #000;
background-color: #fff;
border: 1px dotted;
}
div {background-color: #BFDFFF;
border: 1px solid #0000FF;
margin-bottom: 5px;
}
.eight {width: 200px;
padding: 25px;
}
.nine {width: 200px;}
.nine p {padding: 25px;}
.ten {width: 200px;}
.ten, .ten p {padding: 25px;}
Result
I cannot emphasise strongly enough how important it is that you have a proper grasp of these basic concepts. Otherwise, you are effectively trying to learn to read without knowing the alphabet. This page asasass6.html (3.1 KB) contains all the above examples. You can download it, or simply open it in a browser, and play with it to see how each behaves when you vary the width of the viewport, or zoom text in or out.
For a more in-depth explanation of each, I recommend the Codrops reference:
http://tympanus.net/codrops/css_reference/width/
5 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.