Positioning Items In Html/css

I'm trying to learn some basics of HTML by using jfiddle. This is what I've done. https://jsfiddle.net/Lqn0jch3/ HTML

Solution 1:

is this what you want?

https://jsfiddle.net/Lqn0jch3/1/

i changed the css of p

p {
    display: inline-block;
    color: #000000;
}

the element <p> becomes margins by default, so changing its display or setting margin: 0px; would do the job for you

Solution 2:

I've changed your class, modify the positioning to your needs:

.menu-options {
    background-color: #FFFFFF;
    position:relative;
    top:-20px;
}

Solution 3:

By default the browser adds margin to the top and bottom of the paragraph element, so to fix this you just have to change the margin to 0.

p {
    margin: 0;
}

And you normally wouldn't use a paragraph element in a menu. An Unordered list works well. <ul> <li>

Solution 4:

Separation between them is because of default margin style on element p

You can get diffrent default margin values on diffrent browsers, try using CSS Reset scripts.

Share