35 lines
		
	
	
		
			720 B
		
	
	
	
		
			Markdown
		
	
	
	
	
	
			
		
		
	
	
			35 lines
		
	
	
		
			720 B
		
	
	
	
		
			Markdown
		
	
	
	
	
	
| ---
 | ||
| title: Add Different Padding to Each Side of an Element
 | ||
| ---
 | ||
| ## Add Different Padding to Each Side of an Element
 | ||
| 
 | ||
| 
 | ||
| <!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
 | ||
| 
 | ||
| To adjust the padding of an element use:
 | ||
| 
 | ||
| ```css
 | ||
| .example {
 | ||
|   padding: 10px;
 | ||
| }
 | ||
| ```
 | ||
| 
 | ||
| To specify padding sizes on an element by individual sides we can use ‘padding-top’, ‘padding-right’, ‘padding-bottom’, and ‘padding-left’. We can use any of these in combination and in any order. For example:
 | ||
| 
 | ||
| ```css
 | ||
| .example {
 | ||
|   padding-top: 5px;
 | ||
|   padding-bottom: 0px;
 | ||
| }
 | ||
| ```
 | ||
| 
 | ||
| Or:
 | ||
| 
 | ||
| ```css
 | ||
| .example {
 | ||
|   padding-top: 20px;
 | ||
|   padding-left: 25px;
 | ||
|   padding-right: 5px;
 | ||
| }
 | ||
| ```
 |