CODEWITHSUNDEEP
htmlcssinheritancehtml-lists
Chris Attencio
Chris Attencio

Reputation: 3

css ul and ol not inheriting padding property

https://codepen.io/________/pen/bogMwJ

why can't i remove the default 40px left padding and 16px top and bottom margin on the ul and ol simply by using the body selector? Why do i need to use the ul, ol, and li selectors to remove this margin and padding?

<header>
<style>

     body {margin: 0; padding: 0}

     ul, li  {margin: 0; padding: 0}
</style>
</header>
<body>

<h1>CSS</h1>

    <ul>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
    </ul>   


    <ol>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
    </ol>   

</body>

Upvotes: 0

Views: 363

Answers (1)

Florin Pop
Florin Pop

Reputation: 5135

The ul and ol tags have a default margin and padding set by the browser which can't be overwritten by setting them to the body. You'll have to set it directly to those tags:

ul, ol {
  margin: 0;
  padding: 0;
}

Upvotes: 2

Related Questions