Q:

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

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>

A:

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

