How do you limit the area that the background color takes up in an area in html?-CodePudding

I am fairly new to html therefore this may be something very basic for you. This is the css file for my code:

.sidepanel-list{
    margin-left: 10px;
    background-color:lightgray;

When i run the file, the background color I have mentioned takes up all the space on the lines as I have put in the image. How do I limit it so it only takes some of the space on the lines?

Image will make it way clearer to understand what i am saying:

 <!DOCTYPE html>
   <html>
   <head>

   <style>
   p.set {
   background-color:lightgray;
   }

   </style>
   </head>
   <body>


<p class="set"><b>Categories</p></b>


<p class="set">Cable & docks</p>
    <p class="set">cases & films</p>
    <p class="set">charging devices</p>
    <p class="set">connected home</p>
    <p class="set">headphones</p>


       </body>
       </html>

CodePudding user response：

In CSS, an element has a certain size (obviously). Inside that element, you can add padding to keep text or whatever away from the edge. Outside it, you can add margin to keep other elements away from that element.

What this hopefully shows is that your code is doing exactly what you asked: making the background color of the element itself gray, and then adding a margin outside that area of 10px. (This is why the gray doesn't extend beyond the text, even though you've specified that 10px of left margin, which is pushing the text out from the edge of the window.)

If you want 10px of space between the text and the edge of the gray area, use padding instead of margin.

If what you want is to make the whole thing narrower, you need to apply a width to the stylesheet (e.g. width: 50% or width: 400px).

To get a feel for this stuff, it can help to use your browser's Inspector tool. Among other things, this will show you the size, padding and margin on each element, so you can see exactly what's happening with your layout.