CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mike Strong
Mike Strong

Reputation: 940

How do I fix margin issue in CSS?

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: enter image description here

Now here it is after text was added: enter image description here

What seems to be the issue?

Upvotes: 3

Views: 1550

Answers (3)

luchaos
luchaos

Reputation: 1491

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>

Upvotes: 0

Andrew Hendrie
Andrew Hendrie

Reputation: 6415

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

Upvotes: 4

Asons
Asons

Reputation: 87191

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>

Upvotes: 2

Related Questions