CODEWITHSUNDEEP
htmlcss
Michael Ortiz
Michael Ortiz

Reputation: 777

Remove Visual White Space Between HTML Elements

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:

enter image description here

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

enter image description here

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.

Upvotes: 2

Views: 152

Answers (5)

Kawsar Ahmed
Kawsar Ahmed

Reputation: 453

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>

Upvotes: 1

Nivas
Nivas

Reputation: 18344

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".)

enter image description here

Upvotes: 1

Rahul Tripathi
Rahul Tripathi

Reputation: 172398

You need to set the margin

ul, li, p {margin: 0;}

JSFIDDLE DEMO

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157314

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.

Upvotes: 2

dingo_d
dingo_d

Reputation: 11670

Just put margin:0 on your p and ul elements

See here

Upvotes: 2

Related Questions