[CSS21] Inline box split with padding

I'm trying to understand the inline formatting model's behavior in regards to inline box splitting with padding. Specifically, why is it that when an inline box has right padding that is distributed to the following line, it takes preceding text (words) with it, even though there's still room for those words on the initial line box. Furthermore, the wider the padding, the more text is displaced to the following line box.

Here is an example where the right padding (46px wide) ends just at the end of the line box:

http://tinkerbin.com/ZmmhofCB

Here is the same example where the padding is one pixel wider, causing the browser to displace the padding to the following line box. Why is the word "top" also displaced?

http://tinkerbin.com/QI1s35Lq

And the wider the padding is made, the more text is displaced to the following line box... 100px displaces the words "at the top":

http://tinkerbin.com/67xb2Ef4

200px displaces the words "other, beginning at the top":

http://tinkerbin.com/Gr0tVzNd

And so on.

Perhaps the browser is trying to "equalize the text wrapping margins" or something like that, but that would just be guessing. And also, if that were true, you'd think the browser would displace more text than it did in the 100px right padding example. Anyway I've looked in section 9.4.2 and elsewhere in the spec, but there doesn't seem to be an explanation.

Thank you
 		 	   		  

Received on Wednesday, 23 May 2012 13:10:30 UTC