CODEWITHSUNDEEP
htmlcss
three-blocks
three-blocks

Reputation: 363

There is margin of the ul to the div

I write a url in a div, but why the url is margin right to the div?

enter image description here

My code is below:

#banner {

    height:30px;
    width: 750px;
    margin: 0 auto;
    background-color: aquamarine;
}
#banner ul{

    list-style: none;
    height:30px;
}

#banner ul li {

    float: left;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="stylesheet" href="styles/index.css" type="text/css">
  </head>
  <body>
  <div id="banner">
    <ul >
      <li>Home</li>
      <li>link</li>
      <li>product</li>
      <li>phone</li>
      <li>cat</li>
      <li>about</li>
    </ul>
  </div>
  </body>
</html>

I have two questions there, how to explain those ?

Upvotes: 0

Views: 259

Answers (4)

KHUSHBOO
KHUSHBOO

Reputation: 24

The green color is a default padding. If you want to remove that green color then add padding:0; to #banner ul

your code might be like:

#banner ul{
    padding: 0;
    list-style: none;
    height:30px;
}

Upvotes: 0

Storm1337
Storm1337

Reputation: 23

Orange color: the 30px you configured in #banner ul

Margin: This is the standard ul-padding. If you want to remove it edit to:

#banner ul{

    list-style: none;
    height:30px;
    padding-left:0px;
}

Upvotes: 0

Brett East
Brett East

Reputation: 4322

As Toby mentions, the orange is the browser showing you where there is margin around your selected element, and the green is the padding.

The reason it is there is because browsers add default styles to html. Think about it this way, when you add a <h1> and look at it in the browser, it displays as bigger than a <h2> and that is bigger than a paragraph tag - even if you haven't added a stylesheet. This is because the browser has added this by default.

The same thing happens with all sorts of elements, and in this case you are seeing it appear with an unordered list. The browser has added some margin to the top and bottom of the <ul> and some padding on the left.

If this isn't what you want, you can override it in your own styles, in the same place you already have styles for that element:

#banner ul{
  list-style: none;
  height:30px;
  margin: 0; // removes the default margin
  padding: 0; // removes the default padding
}

If you wanted to remove all of a browsers default styles because you wanted a fresh slate, you could add a 'css reset'. A popular one is from Eric Meyers, https://meyerweb.com/eric/tools/css/reset/. Sometimes this isn't necessary, as it would mean, in this case, that you would have to add list-styles back in, if you just wanted a regular ordered list.

Upvotes: 0

Toby
Toby

Reputation: 13385

What you're seeing is this:

enter image description here

It is a visual representation of the box model, Safari will show you this in the style inspector. I find Chrome a little clearer when displaying CSS information.

Upvotes: 5

Related Questions