what's the difference between padding and margin?
Padding is the space INSIDE an element (inside the border of the element).
Margin is the space OUTSIDE(Around) an element.
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 :)
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
When to use margin vs 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>
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.
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
Android beginner difference between padding and margin
Padding
is for inside/within components. Eg. TextView
, Button
, EditText
etc.
Eg. space between the Text and Border
Margin
is to be applied for the on-outside of the components.
Eg. space between left edge of the screen and border of your component
Visual representation is great in : Difference between a View's Padding and Margin
With Padding
, i have seen a difference in 2.2, 2.3 and say 4.3, 4.4
in such cases:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="ASDFGHJKL" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="15dp"
android:text="@string/hello_world" />
</RelativeLayout>
Also, check the use of dimens:
http://developer.android.com/guide/topics/resources/more-resources.html
I know the difference between padding and margin but when should you use each one?
I think Itay Moav answers from this question provides a good check list on what conditions you would like to use margin, and on what conditions you would like to use padding. Let me copy-paste it here:
- You have some kind of background properties. Margins won't get them.
- You have a border
- You use TD (no margins)
- Two nested items, The margins are collapsed together, where paddings not. (need to check this one)
- They probably affect the width and height of the element differently. (If some one knows better, pls edit this).
Difference between padding and margin?
At it's simplest, padding = inside spacing, margin = outside spacing.
Try it.
<div style="border:1px solid red;padding:8px;margin:8px;width:200px;">TEST</div>
The width of this element will be 2 (border) + 16 (margin) + 16 (padding) + 200 (declared width) for a total 234px.
Related Topics
Using Class Set in Media Query as Mixin in Less
Page-Specific CSS with Rails App
Circle with Three Different Border Colors
How to Add a 3Rd Level to My CSS Drop Down Menu
Font Face Isn't Working in Iis 8.0
Set Line-Height as a Percentage Relative to the Parent Element
CSS Transform Causes Flicker in Safari, But Only When the Browser Is >= 2000Px Wide
Does Bootstrap Have Builtin Padding and Margin Classes
Perfect 100% Width of Parent Container for a Bootstrap Input
CSS "Fixed" Child Element Positions Relative to Parent Element Not to the Viewport, Why
How to Style React-Select Options
What Are Good Resolution Values to Use with Media Queries