# Border Doesn't Enclose Element **URL:** \ **Category:** Uncategorized\ **Created:** [December 26, 2020, 8:05pm UTC](https://forum.kirupa.com/t/border-doesnt-enclose-element/645468 "2020-12-26T20:05:28Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\ **Post date:** [December 26, 2020, 8:05pm UTC](https://forum.kirupa.com/t/border-doesnt-enclose-element/645468/1 "2020-12-26T20:05:28Z")
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](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/5/5d704d559f434a252777574a21df3210a50f12fa.jpeg) > 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 ---
**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\ **Post date:** [December 26, 2020, 8:07pm UTC](https://forum.kirupa.com/t/border-doesnt-enclose-element/645468/2 "2020-12-26T20:07:47Z")
``` Playing With Margin and Padding ``` ---
**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\ **Post date:** [December 27, 2020, 10:02am UTC](https://forum.kirupa.com/t/border-doesnt-enclose-element/645468/3 "2020-12-27T10:02:05Z")
No, border has no effect here. Its such a typical CSS thing, they make mugs for it. ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/6/6ac1c1b1776ef594f20e8db54e43e492c622df5d.jpeg) If you don’t want the text to overflow, you can set the css overflow to hidden. ``` li { overflow: hidden; } ``` ---
**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\ **Post date:** [December 27, 2020, 3:22pm UTC](https://forum.kirupa.com/t/border-doesnt-enclose-element/645468/4 "2020-12-27T15:22:18Z")
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? ``` Playing With Margin and Padding ``` ---
**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\ **Post date:** [December 27, 2020, 3:24pm UTC](https://forum.kirupa.com/t/border-doesnt-enclose-element/645468/5 "2020-12-27T15:24:02Z")
![Screen Shot 2020-12-27 at 8.06.13 AM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/9/940f8bf206c882a22c11eaa132a6d0cd44340593.png) I’m so forgetful - this should have been pasted with the above. ---
**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\ **Post date:** [December 27, 2020, 6:31pm UTC](https://forum.kirupa.com/t/border-doesnt-enclose-element/645468/6 "2020-12-27T18:31:55Z")
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 `
  • ` 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 `
  • ` elements block and wrap the contents in something like a `` then style the span. The span will wrap to the text because its inherently inline. ```
  • Chevrolet
  • BMW
  • Honda
    • ``` ---
    **Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\ **Post date:** [December 28, 2020, 2:41am UTC](https://forum.kirupa.com/t/border-doesnt-enclose-element/645468/7 "2020-12-28T02:41:33Z")
    ``` Playing With Margin and Padding ``` 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 ---
    **Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\ **Post date:** [December 28, 2020, 2:56am UTC](https://forum.kirupa.com/t/border-doesnt-enclose-element/645468/8 "2020-12-28T02:56:05Z")
    ![Screen Shot 2020-12-27 at 7.48.45 PM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/8/86b784e7389f18097344e0a358d831855d9d6699.png) 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 ---
    **Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\ **Post date:** [December 28, 2020, 2:59am UTC](https://forum.kirupa.com/t/border-doesnt-enclose-element/645468/9 "2020-12-28T02:59:10Z")
    Darn! I don’t know why I am having trouble getting the code pasted with my above note - hopefully this attempt will come through. ``` Playing With Margin and Padding ``` ---
    **Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\ **Post date:** [December 28, 2020, 11:08am UTC](https://forum.kirupa.com/t/border-doesnt-enclose-element/645468/10 "2020-12-28T11:08:00Z")
    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). ---
    **Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\ **Post date:** [December 28, 2020, 2:39pm UTC](https://forum.kirupa.com/t/border-doesnt-enclose-element/645468/11 "2020-12-28T14:39:21Z")
    Also, if you haven’t already, it would help to familiarize yourself with the box model. > **[The box model - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model)** > > Everything in CSS has a box around it, and understanding these boxes is key to being able to create more complex layouts with CSS, or to align items with other items. In this lesson, we will take a look at the CSS Box model. You'll get an... It can get quite complicated, but the basics will help a lot with this kind of stuff. ---
    **Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\ **Post date:** [December 28, 2020, 3:55pm UTC](https://forum.kirupa.com/t/border-doesnt-enclose-element/645468/12 "2020-12-28T15:55:50Z")
    OK - thanks - I am off to study the box model for the rest of the AM and get my Ph.D in the topic🙃