How do I fix margin issue in CSS?

Question

I am creating a basic landing page with HTML & CSS where the whole header background is an image.

Here's my CSS code:

body,html {
  height: 100%;
  background: honeydew;
}
header {
  height: 100vh;
  background-image: url(https://s3-us-west-2.amazonaws.com/myBucket/myBG.jpg);
  background-size: cover;
  background-position: center;

}

When I add an h1 or any form of text onto the header my webpage creates a large margin off the top of the browser. I also cannot edit my text at all.

Here is the html:

<!DOCTYPE html>
<html>
  <head>
    <title>myTitle</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <link rel="shortcut icon" type="image/x-icon" href="pencil.ico" />
    <link href="main.css" rel="stylesheet" type="text/css">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
    integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
    crossorigin="anonymous">
  </head>

  <body>
    <header>
      <h1>Hello!</h1>
      <h3>Welcome!</h3>
    </header>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
    integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
    crossorigin="anonymous"></script>
    <!-- jQuery (necessary for Use of jQuery Syntax) -->
    <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
  </body>
</html>

Here's my webpage prior to any addition of text:

Now here it is after text was added:

What seems to be the issue?

The issue seems to be margin collapsing and is the CSS box model's default behaviour. See my answer. — luchaos, Feb 07 '16 at 12:10

Andrew Hendrie · Accepted Answer · 2016-02-07T15:47:33.257

4

1. This css should take care of the margin/padding that you're seeing when you add an h1 element:

h1 {
  padding:0;
  margin:0;
}

To eliminate the spacing around your header background image you'll need to ensure that the html, body and header elements have no margin or padding:

html, body, header {
   margin:0;
   padding:0;
}

You could also use something like this to get rid of the default padding/margin on all elements:

* {
  margin:0;
  padding:0;
}

Many developers will override browser default styles with a css reset like normalize.css.

2. Your main.css should be loaded after the Bootstrap stylesheet.

You should ensure that you're loading your styles after Bootstrap.css. adjust your html to match this:

<!DOCTYPE html>
<html>
  <head>
    <title>Student Sanctuary</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <link rel="shortcut icon" type="image/x-icon" href="pencil.ico" />


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
    integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
    crossorigin="anonymous">
    <!-- Latest compiled and minified CSS -->
    <link href="main.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <header>
      <h1>Hello!</h1>
      <h3>Welcome!</h3>
    </header>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
    integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
    crossorigin="anonymous"></script>
    <!-- jQuery (necessary for Use of jQuery Syntax) -->
    <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
  </body>
</html>

If you don't load your custom css styles after Bootstrap, then you'll have to add !important to you styles in order to override the Bootstrap stylesheet.

3. Here's a working solution in a jsfiddle with a cool cat photo

edited Feb 07 '16 at 15:47

answered Feb 06 '16 at 22:08

Andrew Hendrie

6,205
4
40
71

none of my css code towards my text are being accepted. they are just being ignored. and the real issue is the margin from the top of my header back ground image to the browser. it still appears when i add text to the header – Mike Strong Feb 06 '16 at 22:11
see edit regarding header background image margin/padding – Andrew Hendrie Feb 06 '16 at 22:19
see edit related to bootstrap css - your main.css file should come after your the bootstrap css. – Andrew Hendrie Feb 06 '16 at 22:25
your jsfiddle file has the same issue. the margin is still showing – Mike Strong Feb 06 '16 at 22:53
jsfiddle doesn't allow you to load external resources before you custom css. See updated fiddle. – Andrew Hendrie Feb 06 '16 at 22:57
@AndrewHendrie "This space is there because of the browsers default stylesheet" is not correct. It is there due to margin collapsing. Bootstrap already includes normalize and therefore body and html elements' margins are already removed. – luchaos Feb 07 '16 at 11:48
Additionally, there is a large difference between normalize.css and reset.css. The suggested CSS rule you provided is a reset and does not add up well with normalize.css' behaviour which is included in bootstrap. – luchaos Feb 07 '16 at 12:20
please elaborate on why the suggested CSS rule does not 'add up well' with normalize.css. is there a better way to achieve the desired result? – Andrew Hendrie Feb 07 '16 at 16:05
@AndrewHendrie I guess "add up well" was not the right wording - and I have to thank you because I just checked and it has no effect on normalize.css behaviour at all due to all rules being declared more explicit :) Still, I suspect it is not needed when using bootstrap as the body will have its margin removed already, no? As for the solution itself - I'm pretty sure that margin collapsing is the primary suspect as can be seen in my answer. (Which I updated - the note seemed out of place anyway) – luchaos Feb 07 '16 at 22:25

Asons · Answer 2 · 2016-02-06T22:39:38.583

You need to override bootstrap's CSS like this.

header h1 {
  margin: 0;
}

If you want to set all h1 with one rule, do like this

h1 {
  margin: 0 !important;
}

If you make sure your CSS rules loads after bootstraps you can remove the !important

Snippet

html, body {
  margin: 0;
  height: 100vh;
  background: honeydew;
}
header {
  height: 100%;
  background-image: url(https://s3-us-west-2.amazonaws.com/myBucket/myBG.jpg);
  background-size: cover;
  background-position: center;
}

header h1 {
  margin: 0;
}

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
    integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
    crossorigin="anonymous">

    <header>
      <h1>Hello!</h1>
    </header>

score 0 · Answer 3 · edited May 23 '17 at 12:13

This is margin collapsing in effect and the CSS box model's default behaviour. In particular collapsing margins between parent and child elements where H1's margin is applied on the header element.

The common solution to overcome margin collapsing is to declare an overflow rule, a top padding, or a border on header. Since the header has a fixed height overflow: hidden would be the most fitting. See this answer for more details and further possible solutions.

Setting the top-margin to 0 on h1 has the same effect in this particular case but is not very useful if you actually want to apply a top-margin to it later on.

body,html {
  height: 100%;
  background: honeydew;
}
header {
  height: 100vh;
  background: #39C;
  overflow: hidden; /* overcome margin collapsing */
}
header h1:first-child {
  /* apply any margins - will not affect header anymore */
}

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
    integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
    crossorigin="anonymous">
</head>
<body>
  <header>
    <h1>Hello!</h1>
    <h3>Welcome!</h3>
  </header>
</body>

How do I fix margin issue in CSS?

3 Answers3