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?
No description
3 Replies
Flora
FloraOP2w 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
Simon2w 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.
Flora
FloraOP2w ago
thanks, this worked
Want results from more Discord servers?
Add your server