Deciding a good layout of your page can significantly improve the appearance of your web page
When we decide the layout of our page the first thing that comes in our mind would be margin
Let us explore how to use margin property in our webpages.
Margin is a short hand property to set top, right, bottom and left properties.
CSS has many shorthand properties. The short hand properties in CSS can take from 1 to 4 values. The order of these values are top, right, bottom and left.
If 1 value is specified then the same value is considered for all other 3 values.
If 2 values are specified then the first value is considered as top and bottom values and the second value is considered as left and right values.
If 3 values are specified then the first value is considered as the top value and the second value is considered as left and right values and the third value is considered as bottom value.
Let us see the usage of margin property by applying the margin properties to the heading and paragraph in the below example.
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;}