unwanted margin-right space that cames from nowhere

Question

I'm getting a some weird margin-right space without define any margin-right.

I'm using css reset beforehand with *{margin:0;padding:0;} so there is no reason for that margin right between all ul sections.

The HTML :

<div class="footer-links">

        <ul>
            <li><h3>Title A</h3></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>

        <ul>
            <li><h3>Title B</h3></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>

        <ul>
            <li><h3>Title C</h3></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>

        <ul>
            <li><h3>Title D</h3></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>

    </div>

The CSS :

.footer-links {
    border: 1px solid #ddd;
    width: 992px;
    margin: 0 auto;
    padding: 20px 0;
    color: #222;
}
.footer-links a {    
    color: #565656;
}
.footer-links ul {
    border: 1px solid #ccc;
    display: inline-block;
    min-width: 250px;
    text-align: left;
}
.footer-links h3 {
    padding-bottom: 2px;
} 

.footer-links li {
    padding-bottom: 3px;
}

The jsFiddle :

http://jsfiddle.net/VrMVU/1/

possible duplicate of [Removing whitespace between HTML elements when using line breaks](http://stackoverflow.com/questions/1097006/removing-whitespace-between-html-elements-when-using-line-breaks) — mindriot, May 11 '14 at 05:56

score 2 · Accepted Answer · answered Mar 30 '14 at 01:48

2

You have spaces between them. As in, the new lines.

Try doing </ul><ul>

answered Mar 30 '14 at 01:48

Niet the Dark Absol

320,036
81
464
592

IS THERE ANY TRICK TO compensate THAT WITH CSS ? I LIKE TO USE TABS AND SPACES (TO MAKE THE CODE MORE READABLE) SO I WAS WONDERING IF THERE ANY CSS TRICK TO IGNORE THAT :) ?? – puaction Mar 30 '14 at 01:52
No, but you should minify your HTML before sending it to the browser anyway. – Niet the Dark Absol Mar 30 '14 at 02:08

score 0 · Answer 2 · answered Mar 30 '14 at 01:51

Hope that this helps! js fiddle. What was wrong was the spaces.

       <ul>
        <li><h3>Title A</h3></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul><ul>
        <li><h3>Title B</h3></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul><ul>
    .....

IS THERE ANY TRICK TO compensate THAT WITH CSS ? I LIKE TO USE TABS AND SPACES (TO MAKE THE CODE MORE READABLE) SO I WAS WONDERING IF THERE ANY CSS TRICK TO IGNORE THAT :) ?? — puaction, Mar 30 '14 at 01:53
Well I'm not 100% sure about that. Have a look at [this question](http://stackoverflow.com/questions/1097006/removing-whitespace-between-html-elements-when-using-line-breaks) and [this one too](http://stackoverflow.com/questions/16417292/how-do-i-remove-white-space-between-html-nodes). — manosim, Mar 30 '14 at 01:55

unwanted margin-right space that cames from nowhere

2 Answers2