css margin/border/padding have no effect whatsoever on LI items

Question

In the following very simple html, I've been unable to get the margin/border/padding of my unordered list to be anything other than the default. I've tried "5em", "50em", "100px"...with no effect whatsoever.

Chrome's "developer tools" window shows my css, but in a cross-out font. I know that means my css has been overridden by something. But by what? What could possibly be higher-priority than the plain instructions in this file itself?

And I know I shouldn't need to fiddle with margin, border and padding all together, to get what I want (which is nothing more than extra-wide left indentation) but after margin: "0 0 0 5em" failed, I tried to see if anything worked.

<!DOCTYPE html>

<head>
  <style>
    ul li {
      margin: "5em 5em 5em 5em";
      border: "5em 5em 5em 5em";
      padding: "5em 5em 5em 5em";
    }
  </style>
</head>

<body>
  <ul>
    <li> foo </li>
    <ul>
      <li> a </li>
      <li> b </li>
      <li> c </li>
    </ul>
    <li> bar </li>
  </ul>
</body>

</html>

Also `border: 5em 5em 5em 5em;` isn't a valid CSS rule. When chrome shows the rule crossed out with the yellow "warning" icon next to it, it means that it's an invalid rule. — WOUNDEDStevenJones, Aug 09 '18 at 19:31
Possible duplicate of [Where to use quotes?](https://stackoverflow.com/questions/2899478/where-to-use-quotes) — Hatchet, Aug 09 '18 at 19:32
It looks like you are new to CSS. Refer the following css properties. You'll be able to get your doubts cleared - [Margin](https://www.w3schools.com/css/css_margin.asp), [Padding](https://www.w3schools.com/css/css_padding.asp), [Border](https://www.w3schools.com/css/css_border.asp) — Salvatore, Aug 09 '18 at 19:37

score 1 · Answer 1 · answered Aug 09 '18 at 19:41

None of your values used in the CSS are valid, and so they're crossed out because the browser doesn't understand them.

See below, I've adjusted the values. First off, none of them can be quoted; only certain values are quoted, like when there's a space in a single value.

For padding and margin, only a single value is needed if all 4 values are the same, otherwise:

Two values affect vertical then horizontal (respectively)
Three values affect top, horizontal, then bottom
Four values affect top, right, bottom, then left

For Border however, it defines all 4 borders with 3 values: - Width (1em, 5px, etc) that defines the width of the line - Linetype (solid, dashed, etc) - Colour (#FFF,rgba(255,200,0,1))

To affect individual borders, you need to use border-top, border-right, border-bottom,border-left`.

EDIT: I would suggest checking out some documentation. Personally I prefer the MDN (Mozilla Developer Network):

<!DOCTYPE html>

<head>
  <style>
    ul li {
      margin: 1em;
      border: 1em solid #000;
      padding: 1em;
    }
  </style>
</head>

<body>
  <ul>
    <li> foo </li>
    <ul>
      <li> a </li>
      <li> b </li>
      <li> c </li>
    </ul>
    <li> bar </li>
  </ul>
</body>

</html>

score 0 · Answer 2 · answered Aug 09 '18 at 19:41

Remove the quotes from your CSS properties:

ul li {
    margin: 5em;
    border: 5em solid #FF0000
    padding: 5em;
}

Note that if you are going to use the same value 4 times, you can only write it once as a short-cut. And notice how the border values are set.

css margin/border/padding have no effect whatsoever on LI items

2 Answers2