Kevin Powell - Community•3w ago

how to adjust this space around my table?

i have this table with text in a div, i have it in a div that puts a border around it and holds the title above it. there is some space around the table for some reason though, i didn't put any padding or margins to add it. how can i adjust it to make it smaller?

3 Replies

FloraOP•3w ago

heres the code

      <div style="color:#d5cdfd; margin-right:2vw; margin-left:auto; max-width: 29vw; height:377px; border: 10px solid #d5cdfd; border-collapse: separate; border-spacing: 0; 
      border-radius: 10px; margin-top:2vw">
        <div style="height:80px; color:#d5cdfd; align-items: center; font-size:32px; display: flex; justify-content: center; align-items: center; 
        margin-right:2vw; margin-left:2vw">Extra Notes</div>
        <div style="height:277px; overflow-y:auto; overflow-x:hidden; overflow-wrap:anywhere; color:#d5cdfd; padding-right:1vw; padding-top:1vw; 
        border-top: 10px solid #d5cdfd;">
          <ul>
            <li style="margin-bottom:10px">Can absorb electricity from most sources, storing it within his head.</li>
            <li style="margin-top:10px; margin-bottom:10px">establishmentarism</li>
            <li style="margin-top:10px; margin-bottom:10px">The blood in his head is very acidic, while the blood in the rest of his body isn't quite as acidic.</li>
            <li style="margin-top:10px; margin-bottom:10px">His gills serve as his main weak spot, as striking them will make it hard for him to get air, especially underwater.</li>
            <li style="margin-top:10px; margin-bottom:10px">Moves on land by slithering, similar to that of a snake.</li>
          </ul>
       </div>
      </div>

      <div style="color:#d5cdfd; margin-right:2vw; margin-left:auto; max-width: 29vw; height:377px; border: 10px solid #d5cdfd; border-collapse: separate; border-spacing: 0; 
      border-radius: 10px; margin-top:2vw">
        <div style="height:80px; color:#d5cdfd; align-items: center; font-size:32px; display: flex; justify-content: center; align-items: center; 
        margin-right:2vw; margin-left:2vw">Extra Notes</div>
        <div style="height:277px; overflow-y:auto; overflow-x:hidden; overflow-wrap:anywhere; color:#d5cdfd; padding-right:1vw; padding-top:1vw; 
        border-top: 10px solid #d5cdfd;">
          <ul>
            <li style="margin-bottom:10px">Can absorb electricity from most sources, storing it within his head.</li>
            <li style="margin-top:10px; margin-bottom:10px">establishmentarism</li>
            <li style="margin-top:10px; margin-bottom:10px">The blood in his head is very acidic, while the blood in the rest of his body isn't quite as acidic.</li>
            <li style="margin-top:10px; margin-bottom:10px">His gills serve as his main weak spot, as striking them will make it hard for him to get air, especially underwater.</li>
            <li style="margin-top:10px; margin-bottom:10px">Moves on land by slithering, similar to that of a snake.</li>
          </ul>
       </div>
      </div>

if you're wondering why all of my css is inline, the website i'm making this for doesn't allow non-inline css

Simon•3w ago

The ul element comes with a padding-left by default. If you want to change it you need to apply rules to override that:

<ul style="padding-left:0;">

<ul style="padding-left:0;">

For further research https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists -# hint: many HTML elements come with default stylings – can be more than one rule

MDN Web Docs

Styling lists - Learn web development | MDN

Lists are relatively easy to get the hang of styling once you know a few associated basic principles and specific properties. In the next article, we'll move on to link styling techniques.

FloraOP•3w ago

thanks, this worked

Gaming

Programming

how to adjust this space around my table?