When we apply a border to an HTML element the content may appear very close to the border. This may not look very good.
In order to improve further, the appropriate amount of padding can be used.
We can achieve this using the padding property of CSS.
Let us explore on padding properties of CSS.
The CSS padding property can be used to generate space around the content.
The padding property is used to set some white space between the element's content and the element's border.
Padding is the shorthand property for specifying padding-top, padding-right, padding-bottom, padding-left.
The padding property can take from 1 to 4 values.
Let us observe the usage of padding property in the below example.
The CSS box model is a container which wraps around every HTML element. It consists of margins, borders, padding along with the actual content.
When we set the width and height property for an HTML element using CSS, we are actually setting the width and height of the content.
The complete width and height of an element are calculated by including the padding, border, and margin of the element as well.
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
Demo :
<!doctype html>
<head>
<title>Home Page</title>
<meta charset="UTF-8">
</head>
<body>
<table border="1" align="center">
<tr>
<td width="800px" height="100px">
<h2>Global Bank</h2>
</td>
</tr>
</table>
<table border="1" align="center" cellpadding="2">
<tr>
<td width="700px">
<section>
<h3>Welcome to Global Bank Home Page !</h3><br/>
<p><em>Global Bank</em> is a international bank which has branches in various cities of
various country.</p>
</section>
<p>
This application automates the banking process.Using this application the admin can
easily create new accounts and the customers can login to view their account details.
</p><br />
<table align="center" border="4 solid" bordercolor="#8598CC">
<tr>
<td>
<h4 align="center">Login</h4>
<form name="loginForm" action="Details.html">
<table cellpadding="5">
<tr>
<td align="right">User Name</td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">Password</td>
<td><input type="password" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Login">
</td>
</tr>
</table>
</form>
</td>
</tr><br/>
</table><br/>
<p>Submit online application for new account here <a href="signUp.html">Create Account</a>
</p>
</td>
</tr>
</table>
<table border="1" align="center">
<tr>
<td width="800px" height="30px">
<footer>
<h2>© Global Bank</h2>
</footer>
</td>
</tr>
</table>
</body>
</html>
body{background-color:lightgrey;}