Now, I had this same issue for the text on top, but I added a (left) floating element before the rest of the content with a small width to fix it and I can't seem to find out how to fix it on the bottom.
The problem I have with adding more padding is that the whole paragraph will have more padding and be pushed even more right which is what I was hoping to be able to avoid.
[http://halfmug.x10.mx/images/dont.png]
And this is what I want:
[http://halfmug.x10.mx/images/want.png]
Now, I had this same issue for the text on top, but I added a (left) floating element before the rest of the content with a small width to fix it and I can't seem to find out how to fix it on the bottom.
Any ideas?
<div class="wrapper">
<h1>Header</h1>
<p>Lorem ipsum</p>
</div>
You added float to a header element and it works but with css you can't style last word/line. Try to add more padding:
h1 {padding: 20px 10px 10px;}
p {padding: 10px 10px 20px;}
Anyway you could achive same (or quite simillar effect) witout using images:
http://nicolasgallagher.com/pure-css-speech-bubbles/
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
Here's a hack using a span: http://codepen.io/Paulie-D/pen/knfvo