CODEWITHSUNDEEP
htmlcss
thebootsie123
thebootsie123

Reputation: 51

Html Element Not Aligning All The Way To The Left

I'm not new to HTML or CSS, but I really don't know why this is happening. I could just be dumb and this is an easy question something is really wrong. I'm really having trouble with this. I have a very simple web page with a div element. Not matter what I do I still have space at the top, side, and bottom of it. Here's a picture.

enter image description here

And Here's my HTML and CSS code.

 <!DOCTYPE html>
    <html>
    <head>
    <title>Home</title>
    <style>
      .SideBar {
        background: #4c4c4c;
        float: left;
        height: 100%;
        margin-left: 0px;
        padding-right: 25px;
      }
    </style>
    </head>
     <body style="background-color: #05bcff">
       <div class="SideBar">
          <p style="margin: 0px; padding: 0px">
            asd
          </p>
        </div>
      </body>
    </html>

Upvotes: 0

Views: 2578

Answers (3)

ivanibash
ivanibash

Reputation: 1491

This happens because the <body> element has margin by default in some browsers. Different browsers can choose to apply some basic default styling to elements. Chrome, for example, adds 8px margin to by default. If you set 

body {
  margin: 0px;
}

This will dissappear.

A better way to go about it is to include Reset.css or Normalize.css in your code. Reset.css will unstyle absolutely everything, so that what you write is exactly what is displayed. This gives you greatest control but for most cases it's too much. For example, <h1> , <h2> , <h3>.. tags will all look the same after applying Reset.css .

Normalize.css on another hand preserves useful styling but will make sure that your elements are rendered consistently across all browsers. This is preferred in most cases.

In Codepen you can even try these out. If you click 'Settings' you can choose to include 'Normalize' or 'Reset' in your CSS. You can play around with these to see how your elements are displayed under each.

Upvotes: 1

user5613899
user5613899

Reputation:

You should assign margin 0 and padding 0 to body element in your styling.

Upvotes: 3

Rando
Rando

Reputation: 473

As Frontend employee said just add

.body{
    margin: 0;
    padding: 0;
}

a lot of people employee CSS reset codes at the top of their stylesheets which includes this. Its basically a list of default overrides that clears any styling on elements allowing you to begin with a clean slate See (http://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/)

Upvotes: 1

Related Questions