Remove Visual White Space Between HTML Elements

Question

I am very new to HTML and I need some help on removing visual white space in my HTML code when I compile run it.

This is what I want my HTML page to look like in this specific area:

And this is how it looks on my end (I don't want this. I want it to look like the image above)

This is the code I am using for the table element:

<ul>
    <li>
    <p>Gorras</p>
    <ol>
        <li>Small - $10.00</li>
        <li>Medium - $12.00</li>
        <li>Large - $15.00</li>
</ol>        
</li>
</ul>

<ul>
    <li>
    <p>Camisas</p>
    <ol>
        <li>Small - $20.00</li>
        <li>Medium - $22.00</li>
        <li>Large - $25.00</li>
</ol>        
</li>
</ul>

<ul>
    <li>
    <p>Calzado</p>
    <ol>
        <li>Small - $50.00</li>
        <li>Medium - $60.00</li>
        <li>Large - $75.00</li>
</ol>        
</li>
</ul>

<ul>
    <li>
    <p>Gafas</p>
    <ol>
        <li>Small - $10.00</li>
        <li>Medium - $12.00</li>
        <li>Large - $15.00</li>
</ol>        
</li>
</ul>

Is there any way I can remove these spaces between each list?

Thank you very much and please forgive me because I am new to HTML.

Answer 1

Just put margin:0 on your p and ul elements

See here

Answer 2

You need to reset the user agent stylesheet, for a quick fix, you can use

* {
    margin: 0;
    padding: 0;
}

Demo

So here, the * means reset the margin and padding of ALL elements in the document and then accordingly you can provide margin-left to your lists like

* {
    margin: 0;
    padding: 0;
}

ul {
    margin-left: 50px;
}

ol {
    margin-left: 30px;
}

We reset the margin and padding because say browsers like Firefox, Chrome, etc apply some base styles to your HTML document which is also known as User Agent Stylesheet so inorder to have minimal cross browser issues you should use CSS Reset or using * selector with margin and padding would suffice as well.

But if you see, am using too general selectors here, so it is better to assign a class to your elements or you can wrap them under a single div and assign a class to that and select your lists appropriately.

Answer 3

You need to set the margin

ul, li, p {margin: 0;}

JSFIDDLE DEMO

Answer 4

Remove the <p></p> tag and add margin style as below

<ul  style="margin:0;">
    <li>
    Gorras
    <ol>
        <li>Small - $10.00</li>
        <li>Medium - $12.00</li>
        <li>Large - $15.00</li>
</ol>        
</li>
</ul>

Answer 5

That is because of the default margin on <ul> . This margin is from the default set of styles the browser uses when no style is specified.

You can find that using the developer console of any modern browser (developer console can be got from hitting F12 ).

This is what Chrome shows, and you can see the margins taking the space. (Click the "Select an Element" option - the little magnifying glass on the top left corner of the developer tools window. This is a pointer icon on IE, and then click on the element that you want to "Inspect".)