4

I'm a teacher, teaching basic HTML and CSS in a high school. Last week we discussed and practice lists, and this week we are on the topic of div classes. I'm trying to put a list into a div, while using * to eliminate unwanted space within and around the div. By doing this, the lists are no longer staying in the div. What do I need to do to get the list numbers inside of the div?

.wrapper {
  width: 85%;
  margin-right: auto;
  margin-left: auto;
}

.div1 {
  background-color: green;
  padding: 10px
}

* {
  margin: 0px;
  padding: 0px
}
<div class="wrapper">
  <div class="div1">
    <h2>Famous Dishes</h2>
    <ul style="list-style-type:square">
      <li>Baden-Württemberg</li>
      <ol type="a">
        <li>Maultaschen</li>
        <li>Brenntar</li>
        <li>Sauerbraten</li>
        <li>Sauerkraut</li>
        <li>Spätzle, Knöpfle</li>
      </ol>
      <li>Bavaria</li>
      <ol type="a">
        <li>Weißwürste</li>
        <li>Weizenbier/Weißbier</li>
        <li>Helles Bier</li>
        <li>Radler</li>
      </ol>
      <li> Berlin</li>
      <ol type="a">
        <li>Buletten</li>
        <li>Currywurst</li>
        <li>Eierkuchen</li>
        <li>Eisbein</li>
      </ol>
    </ul>
  </div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Kevin Koch
  • 51
  • 2

4 Answers4

4

You can change the outer lists's list-style-position property to inside:

ul, ol {
  list-style-position: inside;
}


.wrapper {
  width: 85%;
  margin-right: auto;
  margin-left: auto;
}

.div1 {
  background-color: green;
  padding: 10px
}

* {
  margin: 0px;
  padding: 0px
}

ul,
ol {
  list-style-position: inside;
}
<div class="wrapper">
  <div class="div1">
    <h2>Famous Dishes</h2>
    <ul style="list-style-type:square">
      <li>Baden-Württemberg
        <ol type="a">
          <li>Maultaschen</li>
          <li>Brenntar</li>
          <li>Sauerbraten</li>
          <li>Sauerkraut</li>
          <li>Spätzle, Knöpfle</li>
        </ol>
      </li>
      <li>Bavaria
        <ol type="a">
          <li>Weißwürste</li>
          <li>Weizenbier/Weißbier</li>
          <li>Helles Bier</li>
          <li>Radler</li>
        </ol>
      </li>
      <li> Berlin
        <ol type="a">
          <li>Buletten</li>
          <li>Currywurst</li>
          <li>Eierkuchen</li>
          <li>Eisbein</li>
        </ol>
      </li>
    </ul>
  </div>
</div>

Or you can use :not to not target the margin of the list when you use *

*:not(ul):not(ol) 


.wrapper {
  width: 85%;
  margin-right: auto;
  margin-left: auto;
}

.div1 {
  background-color: green;
  padding: 10px
}

*:not(ul):not(ol) {
  margin: 0px;
  padding: 0px
}
<div class="wrapper">
  <div class="div1">
    <h2>Famous Dishes</h2>
    <ul style="list-style-type:square">
      <li>Baden-Württemberg
        <ol type="a">
          <li>Maultaschen</li>
          <li>Brenntar</li>
          <li>Sauerbraten</li>
          <li>Sauerkraut</li>
          <li>Spätzle, Knöpfle</li>
        </ol>
      </li>
      <li>Bavaria
        <ol type="a">
          <li>Weißwürste</li>
          <li>Weizenbier/Weißbier</li>
          <li>Helles Bier</li>
          <li>Radler</li>
        </ol>
      </li>
      <li> Berlin
        <ol type="a">
          <li>Buletten</li>
          <li>Currywurst</li>
          <li>Eierkuchen</li>
          <li>Eisbein</li>
        </ol>
      </li>
    </ul>
  </div>
</div>
GreyRoofPigeon
  • 17,833
  • 4
  • 36
  • 59
j08691
  • 204,283
  • 31
  • 260
  • 272
  • 1
    i would also add not(ol) to keep the indentation – Temani Afif Feb 28 '18 at 14:52
  • 1
    Downvoter care to chime in to how this answer is wrong or not useful? – j08691 Feb 28 '18 at 15:06
  • While both of these work, the list (nested list in the code) puts all the list items in the same location, and not indented to show sub sections of the list. – Kevin Koch Feb 28 '18 at 15:49
  • @KevinKoch Well when you remove the margin and padding from all elements using `*` I'm not sure what you expect to happen. You can add padding back, use another `:not` rule, or just not use the wildcard to begin with. – j08691 Feb 28 '18 at 15:52
  • The second solution is the better one, since it keeps the indent. – GreyRoofPigeon Mar 02 '18 at 11:48
2

I'm trying to put a list into a div, while using * to eliminate unwanted space within and around the div. By doing this, the lists are no longer staying in the div. What do I need to do to get the list numbers inside of the div?

Here's what you may want to tell your students:

The problem is that the * (universal selector) rule you have set is resetting default browser styles.

Most browsers have a set of default styles for rendering HTML documents. Here is a list of recommended default styles from the W3C:

As you can tell from that document, browsers are encouraged to create top and bottom margins for ul and ol elements.

blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }

They are also encouraged to set these defaults:

ol, ul, dir,
menu, dd        { margin-left: 40px }

ol              { list-style-type: decimal }

ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }

Note that some browsers may use padding instead of margin.

As a result, when you set this rule...

* {
  margin: 0px;
  padding: 0px
}

it overrides the browser styles (in accordance with the cascade).

But you wrote:

I'm trying to put a list into a div, while using * to eliminate unwanted space within and around the div.

So why not focus only on the div? Why are you targeting all elements?

Maybe this is what you want:

div {
  margin: 0;
  padding: 0;
}


.wrapper {
  width: 85%;
  margin-right: auto;
  margin-left: auto;
}

.div1 {
  background-color: green;
  padding: 10px;
}

div {
  margin: 0;
  padding: 0;
}
<div class="wrapper">
  <div class="div1">
    <h2>Famous Dishes</h2>
    <ul style="list-style-type:square">
      <li>Baden-Württemberg</li>
      <ol type="a">
        <li>Maultaschen</li>
        <li>Brenntar</li>
        <li>Sauerbraten</li>
        <li>Sauerkraut</li>
        <li>Spätzle, Knöpfle</li>
      </ol>
      <li>Bavaria</li>
      <ol type="a">
        <li>Weißwürste</li>
        <li>Weizenbier/Weißbier</li>
        <li>Helles Bier</li>
        <li>Radler</li>
      </ol>
      <li> Berlin</li>
      <ol type="a">
        <li>Buletten</li>
        <li>Currywurst</li>
        <li>Eierkuchen</li>
        <li>Eisbein</li>
      </ol>
    </ul>
  </div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
0

As alternative to j08691 answer, you can overwrite the overwritten padding:

Add padding-left: 2.5em to the ul and ol

Please note that I corrected your HTML so it's valid :). The 2nd level list must be put inside the 1st level list-item.

.wrapper {
  width: 85%;
  margin-right: auto;
  margin-left: auto;
}

.div1 {
  background-color: green;
  padding: 10px
}

* {
  margin: 0px;
  padding: 0px
}

ul,
ol {
  padding-left: 2.5em;
}
<div class="wrapper">
  <div class="div1">
    <h2>Famous Dishes</h2>
    <ul style="list-style-type:square">
      <li>Baden-Württemberg
        <ol type="a">
          <li>Maultaschen</li>
          <li>Brenntar</li>
          <li>Sauerbraten</li>
          <li>Sauerkraut</li>
          <li>Spätzle, Knöpfle</li>
        </ol>
      </li>
      <li>Bavaria
        <ol type="a">
          <li>Weißwürste</li>
          <li>Weizenbier/Weißbier</li>
          <li>Helles Bier</li>
          <li>Radler</li>
        </ol>
      </li>
      <li> Berlin
        <ol type="a">
          <li>Buletten</li>
          <li>Currywurst</li>
          <li>Eierkuchen</li>
          <li>Eisbein</li>
        </ol>
      </li>
    </ul>
  </div>
</div>
GreyRoofPigeon
  • 17,833
  • 4
  • 36
  • 59
0

The * applies to all classes & IDs. Youre putting it after wrapper and div1 so its overriding the margin and padding in those and setting them to 0.

Yesthe Cia
  • 528
  • 1
  • 7
  • 20
  • `.div1` and `.wrapper` have higher specificity than `*` (which has 0 specificity). So the `*` rule is not overriding any `margin` or `padding` in the source... – Michael Benjamin Feb 28 '18 at 15:50