Greetings again!<br/><br/>I was writing a PM and got to thinking about padding.  No, not this kind of<div class="spoiler_container"><div class="spoiler_header" onclick="hideSecond (this);" role="button">padding</div><div class="spoiler_body">(https://i.imgur.com/mxIgsM1.jpg)</div></div>, the kind of padding you do with BBC.  No, not this kind of<div class="spoiler_container"><div class="spoiler_header" onclick="hideSecond (this);" role="button">BBC</div><div class="spoiler_body">(https://www.tucucu.com/wp-content/uploads/2015/05/granja-con-gallo-negro-4.jpg)</div></div>, the<strong>B</strong>ulletin<strong>B</strong>oard<strong>C</strong>ode we usually talk about on this thread.  Sheesh, you perverts are terrible!<br/><br/>Anyway, we already know about floating images to the right or left of text, and using padding to provide some visual separation, but I do not remember discussing the vertical alignment issues that padding can cause and how to overcome them, so here goes:<br/><br/><strong><span class="bbc_u">No padding:</span></strong><br/><br/><div class="floatleft">(https://elliquiy.com/elluiki/images/2/2e/Smiley_50x50.jpg)</div>This is an<br/>image of<br/>a smiley.<br class="clear_left"/><br/><div class="spoiler_container"><div class="spoiler_header" onclick="hideSecond (this);" role="button">code</div><div class="spoiler_body"><div class="floatleft"><div class="codeheader">Code: <a class="codeoperation" href="javascript:void(0);" onclick="return smfSelectText(this);">[Select]</a></div><pre style="margin: 0; padding: 0;"><code class="bbc_code">[floatleft][img]https://elliquiy.com/elluiki/images/2/2e/Smiley_50x50.jpg[/img][/floatleft]This is an<br/>image of<br/>a smiley.[clearleft]</code></pre></div><br class="clear_left"/></div></div><br/><br/>Yea, fugly, but we already know this.  Let's fix.<br/><br/><strong><span class="bbc_u">Padding of 10 pixels:</span></strong><br/><br/><div class="floatleft">(https://elliquiy.com/elluiki/images/2/2e/Smiley_50x50.jpg)</div>This is an<br/>image of<br/>a smiley.<br class="clear_left"/><br/><div class="spoiler_container"><div class="spoiler_header" onclick="hideSecond (this);" role="button">code</div><div class="spoiler_body"><div class="floatleft"><div class="codeheader">Code: <a class="codeoperation" href="javascript:void(0);" onclick="return smfSelectText(this);">[Select]</a></div><pre style="margin: 0; padding: 0;"><code class="bbc_code">[floatleft][img padding=10]https://elliquiy.com/elluiki/images/2/2e/Smiley_50x50.jpg[/img][/floatleft]This is an<br/>image of<br/>a smiley.[clearleft]</code></pre></div><br class="clear_left"/></div></div><br/><br/>OK, what happened here?  The padding is included for placing considerations, so the actual image is effectively shifted down by 10 pixels, and in order for the text to line up, we have to likewise shift it down by the same amount.<br/><br/>Adding a pixel scaled to a height<em>equal to</em>the padding amount fixes the positioning.<br/><br/><strong><span class="bbc_u">Using a transparent image:</span></strong><br/><br/><div class="floatleft">(https://elliquiy.com/elluiki/images/2/2e/Smiley_50x50.jpg)</div>(https://elliquiy.com/elluiki/images/4/4d/AlTeregoSeparator.png)<br/>This is an<br/>image of<br/>a smiley.<br class="clear_left"/><br/><div class="spoiler_container"><div class="spoiler_header" onclick="hideSecond (this);" role="button">code</div><div class="spoiler_body"><div class="floatleft"><div class="codeheader">Code: <a class="codeoperation" href="javascript:void(0);" onclick="return smfSelectText(this);">[Select]</a></div><pre style="margin: 0; padding: 0;"><code class="bbc_code">[floatleft][img padding=10]https://elliquiy.com/elluiki/images/2/2e/Smiley_50x50.jpg[/img][/floatleft]<br/>[img height=10]https://elliquiy.com/elluiki/images/4/4d/AlTeregoSeparator.png[/img]<br/>This is an<br/>image of<br/>a smiley.[clearleft]</code></pre></div><br class="clear_left"/></div></div><br/><br/>But wait, there is another option:<br/><br/>Adding a blank line with a point size of<em>approximately half</em>the padding amount similarly fixes the positioning.<br/><br/><strong><span class="bbc_u">Using a blank line:</span></strong><br/><br/><div class="floatleft">(https://elliquiy.com/elluiki/images/2/2e/Smiley_50x50.jpg)</div><span class="bbc_size" style="font-size: 5pt;"><br/></span>This is an<br/>image of<br/>a smiley.<br class="clear_left"/><br/><div class="spoiler_container"><div class="spoiler_header" onclick="hideSecond (this);" role="button">code</div><div class="spoiler_body"><div class="floatleft"><div class="codeheader">Code: <a class="codeoperation" href="javascript:void(0);" onclick="return smfSelectText(this);">[Select]</a></div><pre style="margin: 0; padding: 0;"><code class="bbc_code">[floatleft][img padding=10]https://elliquiy.com/elluiki/images/2/2e/Smiley_50x50.jpg[/img][/floatleft][size=5pt]<br/>[/size]This is an<br/>image of<br/>a smiley.[clearleft]</code></pre></div><br class="clear_left"/></div></div><br/><br/>Interestingly, it is also possible to specify font sizes in pixels rather than points.  Through some trial and error I determined specifying a pixel size of<em>approximately 70%</em>of the padding amount achieves similar results to the above.<br/><br/>For reference, replacing 5pt with 7px:<br/><br/><div class="floatleft">(https://elliquiy.com/elluiki/images/2/2e/Smiley_50x50.jpg)</div><span class="bbc_size" style="font-size: 7px;"><br/></span>This is an<br/>image of<br/>a smiley.<br class="clear_left"/><br/><div class="spoiler_container"><div class="spoiler_header" onclick="hideSecond (this);" role="button">code</div><div class="spoiler_body"><div class="floatleft"><div class="codeheader">Code: <a class="codeoperation" href="javascript:void(0);" onclick="return smfSelectText(this);">[Select]</a></div><pre style="margin: 0; padding: 0;"><code class="bbc_code">[floatleft][img padding=10]https://elliquiy.com/elluiki/images/2/2e/Smiley_50x50.jpg[/img][/floatleft][size=7px]<br/>[/size]This is an<br/>image of<br/>a smiley.[clearleft]</code></pre></div><br class="clear_left"/></div></div><br/><br/>One last thing: you probably noticed that when I added the padding, the image got shifted to the right as well as down.  This is because the padding is added all around the image.  If you want to avoid that, you will need to use tables, which have already been extensively covered in this thread.<br/><br/><br/><strong><span class="bbc_u">To summarize:</span></strong><br/><br/>In order to vertically align text with a padded floating image without using tables, use a transparent image of the same height of the padding amount, a blank line with a point size of half that, or a blank line with a pixel size of 70%.<br/><br/><br/>That's it for today.<br/><br/>Have fun,<br/>-- Al<br/>