CODEWITHSUNDEEP
htmlcss
John Smith
John Smith

Reputation: 6207

Linebreak (in code) causes unwanted margin in HTML output

I have a menu, separated by DIV-s. When this look like that:

<div id="container">
  <div>1</div><div>2</div><div>3</div>
</div>

it renderers well, but thats not nice. But if I do that:

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

an unwanted space gets in the output. There is a gap between DIV's. How to fix this?

EDIT: sorry for everyone. Here is a detailed fiddle:

http://jsfiddle.net/qK5Bq/

.places_histNavigator {
    color: #AC3B75;
    font-family: georgiab;
    font-size: 1.3em;
    line-height: 38px;
}

.places_histNavigatorElement {
    border-left: 1px solid #F3F2EB;
    border-right: 1px solid #C2BEA8;
    display: inline-block;
    text-align: center;
}

<div class="places_histNavigator">
<div style="width: 20%;" class="places_histNavigatorElement">1<span class="customSelect legordulo" style="display: inline-block;"><span class="customSelectInner" style="width: 34px; display: inline-block;">25</span></span></div>
<div style="width: 19%;" class="places_histNavigatorElement">2</div>
<div style="width: 20%;" class="places_histNavigatorElement">3</div>
<div style="width: 15%;" class="places_histNavigatorElement">4</div>
<div style="width: 23%;" class="places_histNavigatorElement">5</div>
</div>

<div class="places_histNavigator">
<div style="width: 20%;" class="places_histNavigatorElement">1<span class="customSelect legordulo" style="display: inline-block;"><span class="customSelectInner" style="width: 34px; display: inline-block;">25</span></span></div>
  <hr>
<div style="width: 19%;" class="places_histNavigatorElement">2</div><div style="width: 20%;" class="places_histNavigatorElement">3</div><div style="width: 15%;" class="places_histNavigatorElement">4</div><div style="width: 23%;" class="places_histNavigatorElement">5</div></div>

Upvotes: 3

Views: 157

Answers (3)

NoobEditor
NoobEditor

Reputation: 15911

Based on the assumtion posted in the comment, here is a possible solution : DEMO

Inline attributes consider the spaces existing in between the divs, to avoid it, either use block display or added <!--->(html comment mark) in between the divs.

CSS

 *{
    margin:0px;
    padding:0px;
}
#container1,#container2 {
    display:block /* this is the key, make sure it's not marked inline */
}

HTML

<div id="container1">
    <div>1</div><div>2</div><div>3</div>
</div>
<br />
<div id="container2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

EDIT

i really dont get what you are trying to achieve, but if you want things to display in one line, check this Updated Demo, consider adding white-space:nowrap; to your code if you want to kill extra white spaces in one line.

CSS (2 lines changed)

.places_histNavigator {
    color: #AC3B75;
    font-family: georgiab;
    font-size: 1.3em;
    line-height: 38px;
    white-space:nowrap; /* added this */
    display:block ; /* optional for uniformity*/
}

2nd EDIT

See, as posted in comment, inline attributes consider even the spaces in between the div's...i.e....if you have a markup like this <div> </div> with nothing in between, and its inline, then space between them WOULD BE PARSED by browser and rendered on webpage, to avoid that, (like i said before) place <!--> or change display type. Final Demo

Upvotes: 2

SW4
SW4

Reputation: 71170

If your div elements are set to display inline they are effectively being handled like words, so the HTML formatting is important- in this case new lines create spaces. If you wish to format your HTML but control out this effect, you can set the elements to inline-block then manually control their margins to counter-act this effect, or possibly set word-spacing on the parent.

Upvotes: 1

man
man

Reputation: 229

add margin:0px; and padding:0px; to your body HTML

Upvotes: 1

Related Questions