Small Padding, Big Difference

Small padding, big difference

This is due to the margin collapsing

Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.

You can find further information also on w3c site.

Two margins are adjoining if and only if [...] no line boxes, no clearance, no padding and no border separate them [...]

So if you apply a padding-top (1px is enough), as in your second example, the margins are no longer collapsed. An easy solution, as already suggested, is to remove the default margin of your heading elements and apply a padding instead.

CSS: Padding vs. Height

Both height and padding inherently control the height of an element. I would have to disagree that using padding is wrong, but rather depends on the specific use case.

Use height when you need a fixed container size.

• PRO: Useful for when you don't want the container to stretch vertically.
• CON: Becomes brittle as you change properties like font-size, margin, padding, etc.
  
  
  • Increasing sizes can cause contents to hide or overflow.
  • Changing a font-size, for example, can cause a cascade change (you have to also change the margins/padding, or size properties of sibling/child elements.

Use padding when you don't need a fixed container height, but want to add whitespace.

• PRO: Easier to change font-sizes, margins, paddings, and add additional content to the container that may increase the container's vertical size.
• CON: Adding content/increasing size properties will cause the container to stretch vertically, which is undesirable in some scenarios.
  
  
  • Not good for scenarios where vertical space is limited or needs to be controlled.

Use min-height and max-height for a hybrid approach.

• PRO: Forces a fixed height, but allows content to grow dynamically until it reaches that min or max.
• CON: You still have the "cascade" update problem with size properties and added content once you hit the min or max.

Padding within inputs breaks width 100%

Using CSS3 you can use the property box-sizing to alter how the browser calculate the width of the input.

input.input {
    width: 100%;
    box-sizing: border-box;
}

You can read more about it here: http://css-tricks.com/box-sizing/

Bootstrap - Removing padding or margin when screen size is smaller

The @media query specifically for 'phones' is..

@media (max-width: 480px) { ... }

But, you may want to remove the padding/margin for any smaller screen sizes. By default, Bootstrap adjusts margins/padding to the body, container and navbars at 978px.

Here are some queries that have worked (in most cases) for me:

@media (max-width: 978px) {
    .container {
      padding:0;
      margin:0;
    }

    body {
      padding:0;
    }

    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
      margin-left: 0;
      margin-right: 0;
      margin-bottom:0;
    }
}

Demo

---

Update for Bootstrap 4

Use the new responsive spacing utils which let you set padding/margins for different screen widths (breakpoints):
https://stackoverflow.com/a/43208888/171456

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

---

Related Topics