2

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.

Improve this question
1

5 Answers 5

Reset to default
2

Just put margin:0 on your p and ul elements

See here

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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.

Improve this answer

Comments

1

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>
Improve this answer

5 Comments

I am afraid, removing p tag is not a solution to this
As he is very new to HTML , I provide an easy solution for him, that's all. He'll learn deeper in future , i hope, and avoid this.
@MichaelOrtiz the answer provided by Mr Alien is a widely used solution. I recommend using the reset found below stackoverflow.com/a/25535189/1342440
Yes, you can keep <p></p> tag as <p style="margin:0"></p> . I removed that for simplicity.
Generally don't use inline styling, it's a bad practice. You should always use external css file.
1

You need to set the margin

ul, li, p {margin: 0;}

JSFIDDLE DEMO

Improve this answer

Comments

1

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.