ansaurus

Question

strange border spacing in html/css

Answer 1

+1 A:

display:inline rarely works well. Consider using float:left instead.

Oli 2009-05-24 15:30:12

Thanks, that fixed it!

netgirlk 2009-05-24 15:55:09

Answer 2

A:

Try to add:

body {
    margin: 0;
    padding: 0;
}

Browsers have different default values for these CSS properties.

Nadia Alramli 2009-05-24 15:30:53

I find myself applying `* { margin: 0px; padding: 0px }` in all my stylesheets. Let the browser not make decisions.

Alan Haggai Alavi 2009-05-24 15:34:39

@alan thats never a good idea. Its simply a beginners fix and will only cause trouble later on. You will want to consider changing that.

corymathews 2009-05-24 15:55:13

Answer 3

A:

display:inline-block may be what you want.

SpliFF 2009-05-24 15:36:21

Again, this has fairly unpredictable implementations. I don't think any two major versions of IE render it the same. Floating is a lot more standardised.

Oli 2009-05-24 15:38:07

inline-block is not supported by many browsers.

corymathews 2009-05-24 15:55:44

Answer 4

A:

the gap is caused by the breaking space/new line between the <div>. To fix this put all the <div> on the same line with no space between them. However I would recommend re-thinking the css, possibly using list <ul>

Andrew 2009-05-24 15:49:46

I did use an unordered list but it had the same gaps and I was trying to eliminate any issues with lists by making a sample with divs. Is there a way to get rid of the space without putting all the ul items together on a single line?

netgirlk 2009-05-24 15:56:28

Answer 5

+2 A:

I floated the inner div left which fixed the weird spacing and the outer div left which forced the inner div to be inside of it. You can adjust the styles more to fit your needs.

div.outer{border-top: dotted 1px lime;margin: 10px;float:left;}
div.outer div
{
    float:left;
    margin: 0;
    padding: 0 12px;
    border-left: solid 1px silver;
    border-top: solid 3px red;
}

You could also remove the new lines between the divs to fix just the spaces.

mattphp 2009-05-24 15:51:57

Oli gave the same suggestion earlier so I marked his as the correct answer. Thanks, though. I'll up vote it once I get 15+ rep ;-)

netgirlk 2009-05-24 15:59:49

Answer 6

A:

The reason you're getting the space is due to inline elements interpreting spaces as something to be rendered. This lets you do:

Hello World

and still have 2 separate words. To remove the space you have to...well, remove the space. When you're trying to put elements flush together for layout, as already mentioned, using float: left is the preferred option.

jvenema 2009-05-24 15:59:59

ansaurus

tags:

views:

answers:

strange border spacing in html/css

related questions