This one looks like a text wrap bug in webkit, or did i miss something?
DOM:
<div>
<p>
<img src="http://static.jsbin.com/images/favicon.png">
no sea takimata sanctus estestest Lorem ...
</p>
</div>
CSS:
div {
width: 200px;
}
p {
margin-right: 32px;
padding-left: 30px;
}
img {
float: left;
margin-left: -30px;
}
Demo: http://jsbin.com/onoced/1/edit
Screenshots:
Enable or disable text wrapping for a text box, rich text box, or expression box. Right-click the control for which you want to enable or disable text wrapping, and then click Control Properties on the shortcut menu. Click the Display tab. Select or clear the Wrap text check box.
It is possible to give margins a negative value. This allows you to draw the element closer to its top or left neighbour, or draw its right and bottom neighbour closer to it.
The downside of negative margins is they are difficult to debug and will make your CSS harder to read. The most often misuses of negative margins that I encounter is when it is used to make up for incorrect layouts elsewhere on the site. This is indeed bad practice.
I wouldn't say this is a bug, as you pointed out: it behaves equally in WebKit browsers. Otherwise we'd have to classify every single difference between Browser engines as bugs.
Though there are people who already reported a similar problem to Webkit.org: http://bugs.webkit.org/show_bug.cgi?id=63074
But this is not just limited to paragraphs, same behaviour can be also found in lists and headers.
See example: http://jsbin.com/uzozus/1/edit
An explanation for this behaviour in Webkit browsers is:
If a negative margin is applied opposite a float, it creates a void leading to the overlapping of content.
Source: http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
Let's apply this to your example: your image width is 16px by 16px so in order to equalise this to the negative margin of 30px we have to add 14px horizontally
img {
float: left;
margin-left: -30px;
padding:5px 14px 0 0;
}
See example: http://jsbin.com/onoced/37/edit
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With