How to give space between Header and content and footer?


i am applying has-header and has-footer and padding in ion-content but it still not giving space.

Should i use Grid or call my on custom css to giving space?
I need help on this…


Is it what you’re talking about ?


I use this grid but its not giving space between header and content.
Is it must that we should use grid when creating an app?


Its not giving space between header and content.


Whats your markup look like? Can you put together a codepen for this?

It should be




Will you plz help me out.


Your syntax was way off and your didn’t initialize angular.


I initialize the angular module in controllers.js

but still not working


Did you look at your header-bar syntax? In your codepen you have ion-header when you should have ion-header-bar


yup i am using ion-header-bar now but not working


Can you put together a plnkr of your project?


Hey, initially when I started using ionic I was having the same problem. And I remember I overcame this using ion-content or ion-view I dont remember properly. I will let you know tomorrow morning. Right now I am replying through cell phone.


plnkr ?? I did’nt get you?


Ok Siddhartha i will w8 for your reply


It’s a way for you to basically copy each of your files so we can see what the issue is.
Or if you have a link on github that works too


You have not yet reply me @siddhartha ?

<!DOCTYPE html>
<html ng-app="">
	    <meta charset="utf-8">
	    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
	    <link href="css/css/ionic.css" rel="stylesheet">
	    <link href="css/main.css" rel="stylesheet">   
 <ion-nav-bar animation="nav-title-slide-ios7"  class="bar-positive">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
<h1 class="title"></h1>
<div class="buttons">
<ion-nav-back-button class="button-clear">
<i class="ion-ios7-arrow-left back"></i>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
<ion-side-menu side="left">
 <ion-header-bar class="bar-assertive">
<h1 class="title" Menu</h1>
<script src="js/ionic/ionic.bundle.min.js"></script>

Your index.html should look like this.

And any template should look like:

<ion-view title="Settings">
    <ion-content class="padding">


Please check here my code i still have a problem of spacing. And my design is not showing in plnkr