Usually, list tags have some default styling implemented by the browser.
For example when Google Chrome will add these styles to your <ul>:
By adding the CSS above, that uses a CSS class instead of the HTML tag, you will have more CSS specificity hence you will override the default styles of the browsers.
<section>
<div>A list without margin, padding and list-style-type reset
<ul class="reset-style">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
<div>A list with the default styles
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
<section>
Solution 3 :
I would not recommend you to leave the text on the list without any margin or padding to the sides or up and down, however, since you’ve requested it like that hence I am sharing with you a code snippet doing exactly what you’ve asked. I have changed the background color or the UL tag since I couldn’t see the text well on my end but you can def change it back the desired color of your preference.
I am trying to create an unordered list where the list items are links and when you hover over each link, the background of that list item changes color. I also changed the list-style-type to none which removed the dot next to each item, however, the space where the dot used to be remains. How do I remove this space?
