Padding indicate space inside the container, CSS padding properties are used to create space around an html element, most of the time padding is used for
<div>, <p>, <span>
, but it can go with any other element like td
etc.
padding: 10px 5px 2px 10px;
If you want to create best user experience and make sure your page content are reader-friendly, then we must use consistent padding for every paragraph.
CSS has properties for creating padding space for each side of any element.
Any Padding property can have the following values:
We can set different padding space in each side of container, you can specify either in percentage or in pixel.
<div style="padding:10px;"> </div> // Or you can write a style with different padding on each side <style> .pc { padding-left:10px; padding-right:15px; padding-top:8px; padding-top:6px; } </style> // Padding in percentage <div style="padding:10%;"> </div>
The same padding in above code, we also can write differently like example below.
div { padding: 15px 40px 100px 10px; }
Above indicate
Define margin space around container, css margin example.
<style> .div{ margin-top:10px; margin-top:5px; margin-left:4px; margin-right:6px; } </style>
Any margin property can have the following values:
Margin can be set for each side as shown in above example, but if you don’t specify any side then margin will be applied to all the side like below example
<style> .div{ margin:10px; } </style>
Above style indicates 10px margin for each side of div.
You also can define css margin style of all sides like margin: 4px 2px 7px 4px;
indicates the top margin of an html element
.M1 { margin-top:10px; }
indicates the bottom margin of an html element
.M1 { margin-bottom: 10px; }
indicates the left margin of an html element
.M1 { margin-left: 5px; }
indicates the right margin of an html element
.M1 { margin-right: 5px; }
Css margin auto property will keep any div in centre of html page, this is very useful when you want to keep the layout in center of the screen.
<div style="width:50%;margin: 0 auto;"> </div>
Now if you place the above div element in html page, the div will remain in center of the page.
The difference between padding and margin is, padding defines the space within container and margin defines space outside the container.