Css 3个部门'；s嵌套在以div为中心的区域中，但在没有时充当边距或填充

我有三个div嵌套在另一个div中。这三个div有css display:inline:block，因此它们的行为就像是浮动的，但每个div之间都有一个间隙，就像它们上面有边距或填充一样

以下是HTML：

    <div id="lowerContentHeaderContainer">
      <div id="borderLowerContentL"></div><!-- borderLowerContentL -->
      <div id="textLowerContentM">some title goes here</div><!-- textLowerContent -->
      <div id="borderLowerContentR"></div><!-- borderLowerContentR -->
    </div><!-- lowerContentHeaderContainer -->

在嵌套的div周围添加了边框，因此您可以看到我所说的内容。此外，中心div没有像应该的那样水平对齐

---

你知道如何去掉div之间的空格并正确对齐中心div吗？

浏览器会将换行符视为空格，除非它们是浮动的

html

这里有一些标题​

#lowerContentHeaderContainer {
position:relative;
width:746px;
text-align:center;
}
#borderLowerContentL {
position:relative;
display:inline-block;
width:6px;
height:39px;
background-image:url(img/SideBar_MiddleTitle_Area_01.png);
background-repeat:no-repeat;
border:1px solid #000;
}
#textLowerContentM {
position:relative;
display:inline-block;
height:39px;
background-image:url(img/SideBar_MiddleTitle_Area_02.png);
background-repeat:repeat-x;
border:1px solid #000;
}
#borderLowerContentR {
position:relative;
display:inline-block;
width:6px;
height:39px;
background-image:url(img/SideBar_MiddleTitle_Area_04.png);
background-repeat:no-repeat;
border:1px solid #000;
}

<div id="lowerContentHeaderContainer"><div id="borderLowerContentL">&nbsp;</div><div id="textLowerContentM">some title goes here</div><div id="borderLowerContentR">&nbsp;</div></div>​