Margin and Padding

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

Margin and Padding

CSS Margin and Padding are two of the most important concepts in web design. Both are used to create space around elements on a web page, and both have an impact on the overall look and feel of the page.

All the margin and padding properties can have the following values:

• auto : the browser calculates the margin
• length : specifies a margin in px, pt, cm, etc.
• % : specifies a margin in % of the width of the containing element
• inherit : specifies that the margin should be inherited from the parent element

Padding

In CSS, padding is the space kept between the content and the border. It separates the content of a block from its edge. The amount of padding of an element is specified by using the term “padding” in CSS code.

p{
    border: 1px #333 solid;
    padding: 15px; 
}

Padding

Important Type of padding :

p{
    border: 1px #333 solid;
    padding-top: 15px; 
    padding-right: 10px; 
    padding-bottom: 5px; 
    padding-left: 0; 
}

Padding

Or you can write all the property in one line of code:

p{
    border: 1px #333 solid;
    padding: 15px 10px 5px 0; 
}

Margin

In CSS, the margin is the space outside the border. It separates a block from other blocks.  The margin is also transparent, The amount of margin in CSS is specified using the term “margin”.

p{
    border: 1px #333 solid;
    margin: 15px; 
}

Margin

Important Type of margin :

p{
    border: 1px #333 solid;
    margin-top: 15px; 
    margin-right: 10px; 
    margin-bottom: 5px; 
    margin-left: 0; 
}

Or you can write all the property in one line of code:

p{
    border: 1px #333 solid;
    margin: 15px 10px 5px 0; 
}

Differences Between Margin and Padding

Difference between margin and padding is an important aspect in CSS as margin and padding are two important concepts used in CSS to provide spacing between different items. Basically, a margin is the space around an element and padding refers to the space between an element and the content inside it, Margin separates blocks from adjacent blocks while the padding separates the border from the content.