View Single Post
Old 01-01-2013, 03:13 PM   #1
Rand Brittain
Bookmaker
Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.
 
Posts: 236
Karma: 9102
Join Date: Sep 2010
Device: Cybook Opus
Margins on Floating SVG

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?
Rand Brittain is offline   Reply With Quote