Typo3 offeres the content elements image and text with image. If one would like to add some space between multiple images presented beside each other, he would have to modify the tt_content image object in the template file. Typo3 calculates the maximum width of the images presendet in one row and adds this hard coded to the surrounding <div> tag.
However, one might not want to have this width hard coded in the surrounding div to have more flexibility in styling the images and the space between them with css.
To reach this flexibility, edit your template setup and add the following lines:
tt_content.image.20 {
imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap"> | </div>
}
As a result, the surrounding div will not contain any hardcoded width. To add some space between the images presented in one row, you could add the following lines to your css:
div.csc-textpic-center div.csc-textpic-imagewrap .csc-textpic-image {
margin-right: 9px;
text-align: left;
}