Independently moving elements

[dan1650]

Hello,

How do I move the green-outlined text element down, WITHOUT including the container (grey background)? I've tried adding the margin-top: 3% selector, but it affects both declorations.  I included much of the css content on the right-half of the affected text.

Matthew

[Nancy OShea]

Quick & dirty:  Add empty <p></p> tags above the bordered paragraph text.

For better answers, post the URL. 

[Jesus_Magana0501]

Change the border-width to "0" to get rid of the green outline.

border-width: 3px;     CHANGE TO    border-width: 0px;  

Jesus M Renoud

[Nancy OShea]

Change the border-width to "0" to get rid of the green outline.

By @Jesus_Magana0501

=========

Huh???

Border values have nothing to do with the original question.

[Trains1985]

Hi,

matthewjablonski.com

Please let me back up, here. If touring my site, one will conclude that most pages - including this one - are comprised with a header > graphic > container > footer format, which has worked well until now. It is worth noting that the "graphic" element is placed between the "header" and the "container". If I put it in the header tag, under the graphic's file, the grey would bleed under several pixels of the graphic. If I include it within the container, the image would be constrained to its 70%'s width. So, I ended up having the container's margin being pulled -5px up, to put it up to the picture.

While trying to push the green box, identified as my .intro selector, down, using the margin-top decloration, BOTH the .intro and the .container selectors are affected, leaving the .background-image visible.

My question is how do I move the .intro selector DOWN, without affecting the solid dark-grey?

And, Nancy, I tried adding the <p></p> tags above the box, and it only added visibity between the graphic and the .intro and .container selectors - if I understood your suggestion correctly.

Matthew

[Trains1985]

Attached is an extreme example of my adding the margin-top: 50px; decloration to the .intro selector.

Matthew

[Nancy OShea]

What's the URL to your problem page online so we can see this in action?

[Jon Fritz]

What do you have set for the padding of the dark gray area itself?

Sharing the entire code, via a link, is a better method of troubleshooting.

[Jon Fritz · Accepted solution]

What you describe here is likely something called "Margin Collapse" between a parent and descendent element.

This explains it and how to work around the issue: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Margin_collapsing 

(specifically the "No content separating parent and descendents" info)

[dan1650]

Thanks for the direction, Joh. I haven't had enough time to explore it and fix the issue, but feel confident that I'll to it when I do. 

Matthew