putting things in order...

[liunx]

I have this simple code. It's a photo and under it there's a space for text. The thing that I have 1 pixel of white border around the photo and the text. The problem is that I have 3 pixels space between the photo and the text DIV. I want to make it 1 pixel as well... how?


.leftBar {
background: #fff;
padding: 1px;
width: 190px;
float: left;
}

.text {
background: #134f8e;
padding: 10px;
width: 190px;
height: 80px;
margin: 0px;
text-align: left;
font: 12px;
color: #fff;
}

<div class="leftBar">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"left1.jpg" width="190" height="235" alt="">
<div class="text">
<b>title</b><br><br>

efkjdgkvkja kjlvha vh akljfgvhalk fvhakjfv
efkjdgkvkja kjlvha vh akljfgvhalk fvhakjfv
efkjdgkvkja kjlvha vh akljfgvhalk fvhakjfv
efkjdgkvkja kjlvha vh akljfgvhalk fvhakjfv
</div>
</div>


Thanks!First start with semantic content. The content of the text class div should be a heading and a paragraph. Once the markup is right then you often have more stylistic opportunities..leftBar {
background: #fff;
padding: 1px;
width: 190px;
float: left;
}

p {
font: 12px;
color: #fff;
}

.text {
background: #134f8e;
padding: 10px;
width: 190px;
height: 80px;
margin: 0px;
text-align: left;
font: 12px;
color: #fff;
}

<div class="leftBar">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"left1.jpg" width="190" height="235" alt="">
<div class="text">
<p>
efkjdgkvkja kjlvha vh akljfgvhalk fvhakjfv
efkjdgkvkja kjlvha vh akljfgvhalk fvhakjfv
efkjdgkvkja kjlvha vh akljfgvhalk fvhakjfv
efkjdgkvkja kjlvha vh akljfgvhalk fvhakjfv
</p>
</div>
</div><div class="text">
<h3>title</h3>
<p>
efkjdgkvkja kjlvha vh akljfgvhalk fvhakjfv
efkjdgkvkja kjlvha vh akljfgvhalk fvhakjfv
efkjdgkvkja kjlvha vh akljfgvhalk fvhakjfv
efkjdgkvkja kjlvha vh akljfgvhalk fvhakjfv
</p>
</div>

Although I think I'd put the image and the text in the same div (but I haven't really thought that through).I still have a 2 pixel space between the photo and the text...