Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Difference between a View's Padding and Margin

What is the difference between a View's Margin and Padding?

like image 251
Ragunath Jawahar Avatar asked Jan 06 '11 21:01

Ragunath Jawahar


People also ask

How does padding of a view differ from the view's margin?

What is the difference between a View's Margin and Padding? Padding is inside of the border, margin is outside.

What's difference between margin and padding?

In CSS, a margin is the space around an element's border, while padding is the space between an element's border and the element's content. Put another way, the margin property controls the space outside an element, and the padding property controls the space inside an element.

What is the difference margin and padding in Android layout?

Note that padding goes completely around the content: there is padding on the top, bottom, right and left sides (which can be independent). Margins are the spaces outside the border, between the border and the other elements next to this view. In the image, the margin is the grey area outside the entire object.

What is the difference between margin and border in CSS?

Border - A border that goes around the padding and content. Margin - Clears an area outside the border. The margin is transparent.


2 Answers

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:

enter image description here

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
like image 127
Suragch Avatar answered Oct 25 '22 19:10

Suragch


Padding is the space inside the border, between the border and the actual view's content. Note that padding goes completely around the content: there is padding on the top, bottom, right and left sides (which can be independent).

Margins are the spaces outside the border, between the border and the other elements next to this view. In the image, the margin is the grey area outside the entire object. Note that, like the padding, the margin goes completely around the content: there are margins on the top, bottom, right, and left sides.

An image says more than 1000 words (extracted from Margin Vs Padding - CSS Properties):

alt text

like image 24
Cristian Avatar answered Oct 25 '22 21:10

Cristian