What is the difference between `margin` and `padding` in CSS?
TL;DR: By default I use margin everywhere, except when I have a border or background and want to increase the space inside that visible box.
To me, the biggest difference between padding and margin is that vertical margins auto-collapse, and padding doesn't.
Consider two elements one above the other each with padding of 1em
. This padding is considered to be part of the element and is always preserved.
So you will end up with the content of the first element, followed by the padding of the first element, followed by the padding of the second, followed by the content of the second element.
Thus the content of the two elements will end up being 2em
apart.
Now replace that padding with 1em margin. Margins are considered to be outside of the element, and margins of adjacent items will overlap.
So in this example, you will end up with the content of the first element followed by 1em
of combined margin followed by the content of the second element. So the content of the two elements is only 1em
apart.
This can be really useful when you know that you want to say 1em
of spacing around an element, regardless of what element it is next to.
The other two big differences are that padding is included in the click region and background color/image, but not the margin.
div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }div.padding > div { padding-top: 20px; }div.margin > div { margin-top: 20px; }
<h3>Default</h3><div class="box"> <div>A</div> <div>B</div> <div>C</div></div>
<h3>padding-top: 20px</h3><div class="box padding"> <div>A</div> <div>B</div> <div>C</div></div>
<h3>margin-top: 20px; </h3><div class="box margin"> <div>A</div> <div>B</div> <div>C</div></div>
In css when to use padding and when to use margin
This image can help you understand better.
Using Margin vs Padding?
Margin is the space around elements.
Padding is the space around the elements contents.
So margin is outside the element.
Padding is inside.
You can use margin when you are placing elements near each other
You can use padding when you are changing how a element interacts with other elements.
(not a good explanation)
Also pixel is the pixels on the screen.
Rem is "Relative to font-size of the root element" (w3schools) https://www.w3schools.com/cssref/css_units.asp
Hope this helps.
What is difference between CSS margin and padding?
In short padding make "space" inside your box, and margin do this outside of your box.
This picture explain it pretty good :)
Margin or padding what is recommended?
One important difference (asides from margin means outside and padding means inside): Margins of adjacent elements overlap, when paddings don't. Take this example:
<p>Lorem ipsum</p>
<p>Dolor sic amet</p>
If you use margin:
p { margin: 10px 0; }
The space between these 2 paragraphs will be 10px.
But if you go:
p { padding: 10px 0; }
The contents will be 20px separated.
Should I use margin or padding when formatting a text?
line-height is used to control the spacing between lines of a paragraph. Margin is used between elements containing only text, generally. This isn't much different than standard typography used in print.
So you set the line height for a heading and then control how much space you want underneath it with margin. Just as you would for any other component. The space between paragraphs is margin. However, the space between individual lines of a paragraph are controlled with line height.
All of this can also be used to set a vertical rhythm on a page. You should Google for that.
One good reference for this is The Elements of Typographic Style Applied to the Web
what the difference between margin and padding in Container widget using Flutter framework?
Padding: is the inner space of the element to the edge
Margin: is the space between widgets together
Difference between a View's Padding and Margin
To help me remember the meaning of padding, I think of a big coat with lots of thick cotton padding. I'm inside my coat, but me and my padded coat are together. We're a unit.
But to remember margin, I think of, "Hey, give me some margin!" It's the empty space between me and you. Don't come inside my comfort zone -- my margin.
To make it more clear, here is a picture of padding and margin in a TextView
:
xml layout for the image above
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#c5e1b0"
android:textColor="#000000"
android:text="TextView margin only"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#f6c0c0"
android:textColor="#000000"
android:text="TextView margin only"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#c5e1b0"
android:padding="10dp"
android:textColor="#000000"
android:text="TextView padding only"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#f6c0c0"
android:padding="10dp"
android:textColor="#000000"
android:text="TextView padding only"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#c5e1b0"
android:textColor="#000000"
android:padding="10dp"
android:text="TextView padding and margin"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#f6c0c0"
android:textColor="#000000"
android:padding="10dp"
android:text="TextView padding and margin"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#c5e1b0"
android:textColor="#000000"
android:text="TextView no padding no margin"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#f6c0c0"
android:textColor="#000000"
android:text="TextView no padding no margin"
android:textSize="20sp" />
</LinearLayout>
Related
- Gravity vs layout_gravity
- Match_parent vs wrap_content
Why GitHub use both of padding and margin?
I guess you already know different between margin
and padding
. but wondering why they using both combined instead of one thing.
If you check their code. you will see they come from different class.
.mb-6 {
margin-bottom: 40px;
}
.pb-4 {
padding-bottom: 24px;
}
and If you dig a bit deeper you will see they have these classes in their framework.
.mb-1{ margin-bottom: 4px }
.mb-2{ margin-bottom: 8px }
.mb-3{ margin-bottom: 16px }
.mb-4{ margin-bottom: 24px }
.mb-5{ margin-bottom: 32px }
.mb-6{ margin-bottom: 40px }
and same things for padding pb-1
to pb-6
Now, If they want 64px space they have options to define a new class or re-use those class.
And they choose to reuse .pb-4
+ .mb-6
to get 64px instead of define a new class just for one time using and without messing around with their framwork.
Related Topics
How to Get Linear Gradient Effect on Mozilla Firefox
What Does The Smiley Face ":)" Mean in CSS
iPhone Xr/Xs/Xs Max CSS Media Queries
How to Remove The Default Bootstrap 3 Carousel Control Background Gradients
How to CSS Style Angularjs Directive
CSS Footer Position Stick to Bottom of Browser
Rails Asset Pipeline: Invalid CSS
CSS: Style Applied to a Combination of Classes
Ie10 Flexbox Widths Include Padding, Causing Overflow. Box-Sizing: Border-Box Doesn't Fix
Styling a Hover Statement in Svg
Free Tools to Speed Up Web Development
How to Properly Set an Element's Scope Using Bem
Resizing <Video> Element to Parent Div
Flexbox: Centered Element with Space-Around Elements on Either Side
Remove Spacing Between Table Cells and Rows
Javafx 8 - How to Change The Color of The Prompt Text of a Not Editable Combobox via CSS