Okay, so I'm attempting to use a floating SVG image as the link to what would be a sidebar in the paper copy of a book. I've set the SVG image up like this:
Code:
<div class="icon">
<svg height="200px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" version="1.1" viewBox="0 0 200 200" width="200px">
<image class="icon" width="100%" height="100%" xlink:href="../Images/field.svg"></image>
</svg>
</div>
Code:
.icon {
float: right;
display: block;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
}
In spite of my attempts to set the margins at 0, however, there's quite a sizeable amount of space between the edges of the image and the text around it. What should I be doing to reduce that whitespace?