Different Background Colors in Blocks

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
   Is there a way, other than "<div> blocks", to assign style modifiers  
to blocks of markup?  The markup below renders different background  
colors, but there's a "gap" between each block.  I don't want that gap.  
   I've tried to use <span> instead, but the background color I've set  
for the <body> overrides the "style=..." I placed in the <span> blocks.  
Please advise.  TIA

<body style="background-color:Blue">
[some stuff...]
 <div style="background-color:LightSalmon">
   <h3 style="color: Green"><a name="1975"><center>1975</center></h3>
 <div style="background-color:Grey">
   <h3 style="color: Yellow"><a name="2001"><center>2001</center></h3>
[other stuff...]

This email has been checked for viruses by Avast antivirus software.

Re: Different Background Colors in Blocks

On 14.10.2015 6:40, MikeCopeland wrote:
Quoted text here. Click to load it

The gaps are the default top and bottom margins of <h3> and <p>. The  
body's background color is visible because margins are always  
transparent. So, just set them to zero, e.g.:

div h3, div p

You should also use a markup validator, as invalid HTML might impact  
presentation too.

Best wishes, Osmo

Re: Different Background Colors in Blocks

14.10.2015, 6:40, MikeCopeland wrote:

Quoted text here. Click to load it

Yes, you can assign style rules to any block, such as <h3>, <p>, or  
<section>. But that’s really not the problem here. And if you want to  
combine several elements (such as an <h3> and a <p> in your example)  
into a single block element, then <div> is the only neutral way. (For  
example, <section> in theory implies some special “semantics” and in  
practice might have unexpected effects, like not working at all in some  
rather old browsers.)

Quoted text here. Click to load it

This is nasty and looked like a browser bug to me, but since three  
modern browsers show it, it seems to be a feature, on the dark side of CSS.

Quoted text here. Click to load it

The markup is invalid, since the <a> elements lack end tags. However,  
this does not affect the problem at hand. Anyway, I’d suggest simpler  
markup like
<h3 style="color: Green; text-align: center" id="1975">1975</h3>
(or, rather, with CSS code placed in an external style sheet).

Inspecting the code using Developer Tools in a browser shows an anomaly  
in heights. The height of each <div> element is smaller than the sum of  
the heights of its children, when vertical margins are included. Note  
that <h3> and <p> elements both have default vertical margins. It seems  
that the gap is caused by such margins that flow out of the <div> boxes.  
As said, this is probably a “feature”, but I don’t dare to try and find  
the explanation in CSS specifications now.

A simple fix is to remove the top margin of <h3> and the bottom margin  
of <p>:

h3 { margin-top: 0 }
p  { margin-bottom: 0 }

This may be too simple for your purposes, especially since these rules  
would apply to all <h3> and <p> elements on the page

Yucca, http://www.cs.tut.fi/~jkorpela/

Re: Different Background Colors in Blocks

On 14.10.2015 11:09, Jukka K. Korpela wrote:
Quoted text here. Click to load it

I tend to agree, as the <div> boxes would have the default value  
(visible) of the overflow property. Setting overflow to anything else  
would force the divs to contain the margins of the children also (and  
thus increase the height of the divs accordingly).

Quoted text here. Click to load it

Me thinks it's defined in:

10.6.3 Block-level non-replaced elements in normal flow when 'overflow'  
computes to 'visible'

IIUIC, the divs are spilling because of the default values of overflow  
and height (auto), as the height of the div is determined by the content  
height (sans margins) of the children. IOW, the margins of <h3> and <p>  
are protruding out of the box, because the parent will only honour the  
content height of its children.

Quoted text here. Click to load it

This first occurred to me also. We could also affect the parent,  
something like:

div {

should work, and the earlier mentioned:

div {

would force the parent to contain them offending margins also.

But now I have to run, 18 holes are awaiting :)

Best wishes, Osmo

Site Timeline