There is space between and its subsequent element
. Is there a way to make them visible inline

Question

Kindly suggest the suitable modification to remove the space between the input type="text" and the subsequent div element. If i set width of input type="text" element to 180px and width of the following div to 20px; the div overflows and moves down. I would not want to use margin-left: -...px on the child div to make it appear inline (because it take -8px in firefox and -6px in chrome to make them appear inline) but I would still want both the elements to be displayed perfectly inline without any empty spaces between them and edge to edge of its parent element across all browsers.

Kindly suggest...

css:

#parentDiv {
  display: block;
  width: 200px;
  height: 20px;
  background-color: rgb(200,200,200);
  border: dotted 2px;
  border-radius: 0px 0px 0px 0px;
}
#parentDiv input[type="text"] {
  display: inline-block;
  width: 175px;
  height: 90%;
  border: none;
  vertical-align: top;
}
#parentDiv div {
  background-color: #57c274;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  text-decoration: none;
  height: 100%;
  width: 20px;
  /*margin-left: -6px;*/
  text-align: center;
}

<div id=parentDiv>
  <input type="text">
  <div></div>
</div>

https://css-tricks.com/fighting-the-space-between-inline-block-elements/ — CBroe, Mar 25 '15 at 22:38
[How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Jonathan Lonowski, Mar 25 '15 at 22:38

score 2 · Answer 1 · answered Mar 25 '15 at 22:38

2

Change

<div id=parentDiv>
  <input type="text">
  <div></div>
</div>

to

<div id='parentDiv'>
  <input type='text' value='' /><div></div>
</div>

In HTML either a single or multiple spaces or a line break will create a single white space. Since there is line break before <div> there is a text node there.

answered Mar 25 '15 at 22:38

StackSlave

10,198
2
15
30

Hey there thanks for help. I must really appreciate how swiftly you caught such minute error. I must admit i am certainly impressed... – Pratik Kedia Mar 25 '15 at 22:52
Your suggestion above soles the issue in chrome but still persists in firefox when setting width of input to 80% and div to 20%... – Pratik Kedia Mar 25 '15 at 23:00
I usually do `*{display:block, float:left}`. – StackSlave Mar 25 '15 at 23:10

Roko C. Buljan · Accepted Answer · 2015-03-25T22:52:34.030

Simply float your elements

Than apply this styles to make it nice across all modern browsers:

#parentDiv {
    width: 200px;                                               /* 200- */
    height: 20px;
    background-color: rgb(200,200,200);
    border: dotted 2px;
    border-radius: 0px 0px 0px 0px;
}
#parentDiv input[type="text"] {
    box-sizing:border-box;       /* Respect the designer :) */
    width: 180px;                                               /* 180= */
    height: 100%;                /* Yey! finally 100% */
    border: none;
    float:left;                  /* Go left */
}
#parentDiv div {
    background-color: #57c274;
    float:right;                 /* Go right */
    cursor: pointer;
    color: #ffffff;
    text-decoration: none;
    height: 100%;
    width: 20px;                                                /* 20 */
    text-align: center;
}

jsBin demo

Yey This solution solves the issue across both the browsers. thanks a ton... — Pratik Kedia, Mar 25 '15 at 23:15

score 0 · Answer 3 · answered Mar 25 '15 at 22:48

here's a snippet extending PHPglue's answer

#parentDiv {
  display: block;
  width: 200px;
  height: 20px;
  background-color: rgb(200,200,200);
  border: dotted 2px;
  border-radius: 0px 0px 0px 0px;
}
#parentDiv input[type="text"] {
  display: inline-block;
  width: 180px;
  height: 90%;
  border: none;
  vertical-align: top;
}
#parentDiv div {
  background-color: #57c274;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  text-decoration: none;
  height: 100%;
  width: 20px;
  /*margin-left: -6px;*/
  text-align: center;
}

<div id=parentDiv>
  <input type="text"><div></div></div>

There is space between and its subsequent element . Is there a way to make them visible inline

3 Answers3

There is space between and its subsequent element
. Is there a way to make them visible inline