Question

I have this html:

<div class="warning">
    <span>text text text</span>
</div>

and this css:

.warning
{
    background:#F2EEBB url(Images/warning_triangle.gif) no-repeat right center; 
    border:solid 1px red;
    margin:5px;
    color:#000000;
    font-weight:bold;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:3px;
    padding-right:18px;
}

This is the result:

The problem is that the background image that aligned to the right don’t have padding between it and the border. How can I add a padding between the image and the border?
(I cannot add elements to the div!)

Answer 1

Without any changes in html, and only a little change in css you can accomplish that .Try this css – I just change the position of the warning icon.

background:#F2EEBB url(Images/warning_triangle.gif) no-repeat 99.5% center;

<div class="warning">
    <span>text text text</span>
</div>


.warning
{
    background:#F2EEBB url(Images/warning_triangle.gif) no-repeat 99.5% center; 
    border:solid 1px red;
    margin:5px;
    color:#000000;
    font-weight:bold;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:3px;
    padding-right:18px;
}