On Tue, Mar 6, 2012 at 9:22 PM, HallMarc Sales
<[email protected]> wrote:
> Try this instead
>
> p.location {
> text-align: left;
> padding-left: 20px;
> margin: 0;
> padding: 12px 0 12px 20px;
> }
>
> Margins apply to the outside of an element so no background is inherited by
> the "space" created while padding is applied inside the element and as such
> is within the background area.
That'll definitely work, but it may create some (admittedly minor)
inconsistencies if the user changes font size... This one paragraph will be
different from all of the others.
I can see that the 12px top and bottom padding match the _computed_
top and bottom
margins, but the user-agent stylesheet uses em for the top and bottom margins.
If you want to trade margin for padding, I recommend you use the same relative
unit that the default stylesheet uses.
So, there are two solutions (so far).
Set overflow:hidden on the containing block:
div.content {
overflow: hidden;
}
The only potential problem here is if you actually want to see a child of the
content block that is positioned outside of the content block.
Or change the margin on the problematic element to padding:
p.location {
margin: 0;
padding-left: 20px;
padding-top: 1em;
padding-bottom: 1em;
}
Another problem I see with the second solution is that you have to change your
CSS if another element ends up at the bottom of the container.
--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com
> Thank you,
> Marc Hall
> HallMarc Websites
> www.HallMarcWebsites.com
> 610-446-3346
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
