When styling a clickable button, should I be using padding, width and height, or both?

HTML & CSS
15

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)

1265×653 47.2 KB

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

1266×465 23.7 KB

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

278×636 20.5 KB

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/

http://tympanus.net/codrops/css_reference/height/

http://tympanus.net/codrops/css_reference/padding/

5 Likes