Border Doesn't Enclose Element

1

I don’t get why Chevrolet goes outside of the box. I thought that any border would automatically encircle the element it’s attributed to.

Screen Shot 2020-12-26 at 12.59.20 PM
Screen Shot 2020-12-26 at 12.59.20 PM1138×1542 125 KB

Playing With Margin and Padding body { background-color: rgb(229, 233, 236); } ul { font-size: 100px; padding: 130px; border-style: solid; border-color: rgb(241, 15, 15); border-width: 5px; list-style-type: none; background-color: rgb(179, 255, 0); } .beemer { border-style: solid; border-color: rgb(15, 132, 241); border-width: 7px; padding: 40px; background-color: rgb(226, 203, 139); } .civic { border-style: solid; border-color: rgb(15, 241, 203); border-width: 7px; padding: 40px; background-color: rgb(144, 144, 168); } .chevy { border-style: solid; border-color: rgb(241, 15, 154); border-width: 7px; padding: 40px; background-color: rgb(144, 144, 168); }
  • Chevrolet
  • BMW
  • Honda
2 
    <!DOCTYPE html>
    <html lang="en">
    <head>
     <title>Playing With Margin and Padding</title>
     <style>
       body {
         background-color: rgb(229, 233, 236);
       }
     ul   {
       font-size: 100px;
       padding: 130px;
       border-style: solid;
      border-color: rgb(241, 15, 15);
      border-width: 5px;
      list-style-type: none;
      background-color: rgb(179, 255, 0);
    }
    .beemer {
      border-style: solid;
      border-color: rgb(15, 132, 241);
      border-width: 7px;
      padding: 40px;
      background-color: rgb(226, 203, 139);
    }
    .civic  {
      border-style: solid;
      border-color: rgb(15, 241, 203);
      border-width: 7px;
      padding: 40px;
      background-color: rgb(144, 144, 168);
      }
    .chevy  {
      border-style: solid;
      border-color: rgb(241, 15, 154);
      border-width: 7px;
      padding: 40px;
      background-color: rgb(144, 144, 168);
      }
    </style>
    </head>
    <body>
      <ul>
        <li class="chevy">Chevrolet</li>
        <li class="beemer">BMW</li>
        <li class="civic">Honda</li>
      </ul>
    </body>
    </html>
3

No, border has no effect here. Its such a typical CSS thing, they make mugs for it.

image
image860×909 48.3 KB

If you don’t want the text to overflow, you can set the css overflow to hidden.

li {
   overflow: hidden;
}
4

OK - so why in this instance, where I have removed the padding altogether from the ul and the 3 li’s, do the borders of the li’s stretch all the way to the right? Shouldn’t they terminate immediately after the words as I have drawn with the 3 black vertical lines? In a similar vein, what’s that small strip of green doing to the L of the borders? Without padding, it shouldn’t be there should it?

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Playing With Margin and Padding</title>
 <style>
   body {
     background-color: rgb(229, 233, 236);
   }
 ul   {
   font-size: 100px;
 
   border-style: solid;
  border-color: rgb(241, 15, 15);
  border-width: 5px;
  list-style-type: none;
  background-color: rgb(179, 255, 0);
}
.beemer {
  border-style: solid;
  border-color: rgb(15, 132, 241);
  border-width: 7px;

  background-color: rgb(226, 203, 139);
}
.civic  {
  border-style: solid;
  border-color: rgb(15, 241, 203);
  border-width: 7px;

  background-color: rgb(144, 144, 168);
  }
.chevy  {
  border-style: solid;
  border-color: rgb(241, 15, 154);
  border-width: 7px;

  background-color: rgb(197, 175, 48);
  margin: 0px;
  }
</style>
</head>
<body>
  <ul>
    <li class="chevy">Chevrolet</li>
    <li class="beemer">BMW</li>
    <li class="civic">Honda</li>
  </ul>
</body>
</html>
5

Screen Shot 2020-12-27 at 8.06.13 AM
Screen Shot 2020-12-27 at 8.06.13 AM1240×426 33.2 KB

I’m so forgetful - this should have been pasted with the above.

6

The padding is what kept those lines from going any farther. When you remove the padding, it can stretch to the edge of the screen (or the edge of that container, wherever that may be).

The <li> elements, being block, will by default stretch to the right until the edge of the container. If you want them to conform to the width of the words, you can make them inline (or inline-block), but then they won’t automatically be on their own line. There are ways around this but it can be tricky.

li {
  display: inline-block;
}

The easiest thing to do is to keep the <li> elements block and wrap the contents in something like a <span> then style the span. The span will wrap to the text because its inherently inline.

<li class="chevy"><span>Chevrolet</span></li>
<li class="beemer"><span>BMW</span></li>
<li class="civic"><span>Honda</span></li>
7 
<!DOCTYPE html>
<html lang="en">
<head>
 <title>Playing With Margin and Padding</title>
 <style>
   body {
     background-color: rgb(229, 233, 236);
   }
 ul   {
   font-size: 100px;
 
   border-style: solid;
  border-color: rgb(241, 15, 15);
  border-width: 5px;
  list-style-type: none;
  background-color: rgb(179, 255, 0);
}
.beemer {
  border-style: solid;
  border-color: rgb(15, 132, 241);
  border-width: 7px;

  background-color: rgb(226, 203, 139);
}
.civic  {
  border-style: solid;
  border-color: rgb(15, 241, 203);
  border-width: 7px;

  background-color: rgb(144, 144, 168);
  }
.chevy  {
  border-style: solid;
  border-color: rgb(241, 15, 154);
  border-width: 7px;

  background-color: rgb(197, 175, 48);
  margin: 0px;
  }
</style>
</head>
<body>
  <ul>
    <li class="chevy"><span>Chevrolet</span></li>
    <li class="beemer"><span>BMW</span></li>
    <li class="civic"><span>Honda</span></li>
  </ul>
</body>
</html>

I copied those 3 li’s that now include the “span” tags but it made no difference to the output - the background colors and the borders still go all the way to the R side of the page so I think the answer must lie in " wrap the contents in something like a - span - then style the span". Problem is - I have no idea how to style this element called span

8

Screen Shot 2020-12-27 at 7.48.45 PM
Screen Shot 2020-12-27 at 7.48.45 PM1084×736 37.2 KB

This time I put padding values back in - just a single value mind you - which is supposed to - When one single value is provided, the padding value will apply to all four sides of the element (ie: top, right, bottom, left). But the padding value only seems to apply to the Left, Top, Bottom - on the RS the padding goes way beyond any padding value that I have for the various vehicles. This code still has the span tags which as I said previously, haven’t made a difference. A mystery to be sure!



Playing With Margin and Padding

body {
background-color: rgb(229, 233, 236);
}
ul {
font-size: 100px;
padding: 100px;
border-style: solid;
border-color: rgb(241, 15, 15);
border-width: 5px;
list-style-type: none;
background-color: rgb(179, 255, 0);
}
.beemer {
border-style: solid;
border-color: rgb(15, 132, 241);
border-width: 7px;
padding: 40px;
background-color: rgb(226, 203, 139);
}
.civic {
border-style: solid;
border-color: rgb(15, 241, 203);
border-width: 7px;
padding: 20px;
background-color: rgb(144, 144, 168);
}
.chevy {
border-style: solid;
border-color: rgb(241, 15, 154);
border-width: 7px;
padding: 60px;
background-color: rgb(197, 175, 48);
margin: 0px;
}




  • Chevrolet

  • BMW

  • Honda



9

Darn! I don’t know why I am having trouble getting the code pasted with my above note - hopefully this attempt will come through.

<html lang="en">
<head>
 <title>Playing With Margin and Padding</title>
 <style>
   body {
     background-color: rgb(229, 233, 236);
   }
 ul   {
   font-size: 100px;
 padding: 100px;
   border-style: solid;
  border-color: rgb(241, 15, 15);
  border-width: 5px;
  list-style-type: none;
  background-color: rgb(179, 255, 0);
}
.beemer {
  border-style: solid;
  border-color: rgb(15, 132, 241);
  border-width: 7px;
  padding: 40px;
  background-color: rgb(226, 203, 139);
}
.civic  {
  border-style: solid;
  border-color: rgb(15, 241, 203);
  border-width: 7px;
  padding: 20px;
  background-color: rgb(144, 144, 168);
  }
.chevy  {
  border-style: solid;
  border-color: rgb(241, 15, 154);
  border-width: 7px;
  padding: 60px;
  background-color: rgb(197, 175, 48);
  margin: 0px;
  }
</style>
</head>
<body>
  <ul>
    <li class="chevy"><span>Chevrolet</span></li>
    <li class="beemer"><span>BMW</span></li>
    <li class="civic"><span>Honda</span></li>
  </ul>
</body>
</html>
10

You’re still targeting the block li elements, not the inline spans.

.beemer span { ... }
.civic span { ... }
.chevy span { ... }

Note that you may not want ALL of the styles to get applied to the spans. You’ll need to play around with it until you get what you want (IF this is what you’re after).

11

Also, if you haven’t already, it would help to familiarize yourself with the box model.

It can get quite complicated, but the basics will help a lot with this kind of stuff.

12

OK - thanks - I am off to study the box model for the rest of the AM and get my Ph.D in the topic🙃

2 Likes