margins between floats and inline content alongside

Hi!

This:

p#p1 {
text-align:left;
}
p#p2 {
text-align:center;
}
i#i1 {
float:left;
margin-right:2ex;
}
i#i2 {
float:right;
margin-left:2ex;
}

<p id="p1"><img id="i1" alt="X"><img id="i2" alt="Y">text text text</p>
<p id="p2">TEXT TEXT TEXT</p>

looks like: [fixed font advised]

XXXXXXXXXXXXX text text text text text text YYYYYYYYYYYY
XXXXXXXXXXXXX text text text text text te YYYYYYYYYYYY
XXXXXXXXXXXXX text text text text text tex YYYYYYYYYYYY
XXXXXXXXXXXXX text text text text text te YYYYYYYYYYYY
XXXXXXXXXXXXX text text text YYYYYYYYYYYY
XXXXXXXXXXXXX YYYYYYYYYYYY
XXXXXXXXXXXXX TEXT TEXT TEXT TEXT TEXT TEXT YYYYYYYYYYYY
XXXXXXXXXXXXX TEXT TEXT TEXT TEXT TEXT TE YYYYYYYYYYYY
XXXXXXXXXXXXX TEXT YYYYYYYYYYYY
XXXXXXXXXXXXX YYYYYYYYYYYY
XXXXXXXXXXXXX
XXXXXXXXXXXXX
XXXXXXXXXXXXX
XXXXXXXXXXXXX

I want:

XXXXXXXXXXXXX text text text text text text YYYYYYYYYYYY
XXXXXXXXXXXXX text text text text text te YYYYYYYYYYYY
XXXXXXXXXXXXX text text text text text tex YYYYYYYYYYYY
XXXXXXXXXXXXX text text text text text te YYYYYYYYYYYY
XXXXXXXXXXXXX text text text YYYYYYYYYYYY
XXXXXXXXXXXXX YYYYYYYYYYYY
XXXXXXXXXXXXX TEXT TEXT TEXT YYYYYYYYYYYY
XXXXXXXXXXXXX TEXT TEXT TEXT TEXT YYYYYYYYYYYY
XXXXXXXXXXXXX TEXT TEXT TEXT T YYYYYYYYYYYY
XXXXXXXXXXXXX TEXT TEXT TEXT YYYYYYYYYYYY
XXXXXXXXXXXXX
XXXXXXXXXXXXX
XXXXXXXXXXXXX
XXXXXXXXXXXXX

That is, to increase the space between a floated element and inline content
flowing next to it in one paragraph but not another. This space is usually
controled by the margin of the float, because the pararaph margins are
outside the floats.

Any advice gratefully received.

and then viza said:

Hi!

This:

p#p1 {
text-align:left;
}
p#p2 {
text-align:center;
}
i#i1 {
float:left;
margin-right:2ex;
}
i#i2 {
float:right;
margin-left:2ex;
}

p id="p1"><img id="i1" alt="X"><img id="i2" alt="Y">text text text</p
p id="p2">TEXT TEXT TEXT</p

looks like: [fixed font advised]

XXXXXXXXXXXXX text text text text text text YYYYYYYYYYYY
XXXXXXXXXXXXX text text text text text te YYYYYYYYYYYY
XXXXXXXXXXXXX text text text text text tex YYYYYYYYYYYY
XXXXXXXXXXXXX text text text text text te YYYYYYYYYYYY
XXXXXXXXXXXXX text text text YYYYYYYYYYYY
XXXXXXXXXXXXX YYYYYYYYYYYY
XXXXXXXXXXXXX TEXT TEXT TEXT TEXT TEXT TEXT YYYYYYYYYYYY
XXXXXXXXXXXXX TEXT TEXT TEXT TEXT TEXT TE YYYYYYYYYYYY
XXXXXXXXXXXXX TEXT YYYYYYYYYYYY
XXXXXXXXXXXXX YYYYYYYYYYYY
XXXXXXXXXXXXX
XXXXXXXXXXXXX
XXXXXXXXXXXXX
XXXXXXXXXXXXX

I want:

XXXXXXXXXXXXX text text text text text text YYYYYYYYYYYY
XXXXXXXXXXXXX text text text text text te YYYYYYYYYYYY
XXXXXXXXXXXXX text text text text text tex YYYYYYYYYYYY
XXXXXXXXXXXXX text text text text text te YYYYYYYYYYYY
XXXXXXXXXXXXX text text text YYYYYYYYYYYY
XXXXXXXXXXXXX YYYYYYYYYYYY
XXXXXXXXXXXXX TEXT TEXT TEXT YYYYYYYYYYYY
XXXXXXXXXXXXX TEXT TEXT TEXT TEXT YYYYYYYYYYYY
XXXXXXXXXXXXX TEXT TEXT TEXT T YYYYYYYYYYYY
XXXXXXXXXXXXX TEXT TEXT TEXT YYYYYYYYYYYY
XXXXXXXXXXXXX
XXXXXXXXXXXXX
XXXXXXXXXXXXX
XXXXXXXXXXXXX

That is, to increase the space between a floated element and inline
content
flowing next to it in one paragraph but not another. This space is
usually controled by the margin of the float, because the pararaph margins
are outside the floats.

Any advice gratefully received.

Ney André de Mello Zunino, your testpage adds space using 2 here. I want to
control value 1, because the paragraph may or may not end up next to the
float.

XXXXXXXXXXXXX text text text text text text YYYYYYYYYYYY
XXXXXXXXXXXXX text text text text text te YYYYYYYYYYYY
XXXXXXXXXXXXX text text text text text tex YYYYYYYYYYYY
XXXXXXXXXXXXX text text text text text te YYYYYYYYYYYY
XXXXXXXXXXXXX text text text YYYYYYYYYYYY
XXXXXXXXXXXXX YYYYYYYYYYYY
XXXXXXXXXXXXX TEXT TEXT TEXT YYYYYYYYYYYY
XXXXXXXXXXXXX<--1-->TEXT TEXT TEXT TEXT YYYYYYYYYYYY
XXXXXXXXXXXXX TEXT TEXT TEXT T YYYYYYYYYYYY
<------- 2 --------> TEXT TEXT TEXT YYYYYYYYYYYY
XXXXXXXXXXXXX
XXXXXXXXXXXXX
XXXXXXXXXXXXX
XXXXXXXXXXXXX