Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't get rid of spaces between inline-block elements [duplicate]

Tags:

html

css

layout

Please see the following example: http://jsfiddle.net/Gv6w3/

As you can see, it's a simple example of menu items set to display:inline-block; All I'm trying to do is get the menu items flush against each other- I have margins set to 0px, but i can't get rid of the spacing between them? What is going on??

EDIT: Just noticed duplicates, my bad: How to remove the space between inline-block elements?, display: inline-block extra margin

like image 522
Yarin Avatar asked Mar 03 '11 17:03

Yarin


People also ask

How do I stop spacing in HTML?

Approach 1: We can remove space between any two tags by simply using margin-bottom property. The margin-bottom property sets the bottom margin of an element. We will assign a negative value to the margin-bottom of a particular tag to eliminate the extra space between the tags as shown.

How do you remove extra space in CSS?

apply float:left and that will remove the space so the text doesn't have to be on 1 line.


2 Answers

put the close tag of one and the open tag of the next element on the same line:

<div class="top-menu-item">
Item 2
</div><div class="top-menu-item">
Item 3</div>

Inline elements take the whitespace that is between them and this renders as 1 space. If you put the next element directly after the previous there will be no whitespace in between and the space will be gone.

like image 180
Bazzz Avatar answered Oct 03 '22 10:10

Bazzz


Quick redux of the problem:

inline and inline-block tell the browser to display an element as if it was a word. Words have spaces between them. Your options for getting rid of these spaces are:

  1. Remove the spaces from the markup
  2. Use floats instead, which don't care about spaces in markup
  3. Or find the width of a space and use margins or positioning to remove the spaces visually.

Solutions:

All css options, forevermore: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

If you can't float, an em based negative margin gets my vote.

like image 27
RobW Avatar answered Oct 03 '22 11:10

RobW