- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
CSS Margins and Padding
For margins, use the CSS margins property. The margin property defines the space around an HTML element.
For padding, the padding property allows you to specify how much space should appear between the content of an element and its border.
Following is the code displaying margins and padding in CSS −
Example
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .outer-div { border: 2px solid purple; width: 300px; height: 200px; } .inner-div { border: 2px solid green; margin: 20px; padding-left: 20px; } </style> </head> <body> <h1>Margin and padding example</h1> <div class="outer-div"> <div class="inner-div"> Some sample text inside the inner div which will be padded by 20px all sides. </div> </div> </body> </html>
Output
The above code will produce the following output −
- Related Articles
- CSS padding property
- CSS padding-box Value
- CSS padding-right property
- CSS padding-bottom property
- CSS padding-top property
- CSS padding-left property
- Setting Margins for Individual Sides using CSS
- Animate CSS padding-bottom property
- Animate CSS padding-left property
- Animate CSS padding-right property
- The padding shorthand Property in CSS
- Perform Animation on CSS padding-top property
- Change the padding of a button with CSS
- Specify the left padding of an element with CSS
- Specify the bottom padding of an element with CSS

Advertisements