Participant

Answered

Independently moving elements

9 replies
637 views
Translate

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

Jon FritzCorrect answer

Community Expert

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)

Jon Fritz

Correct answer

Community Expert

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)

Translate

D

dan1650Author

Participant

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

Translate

J

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

Translate

Nancy OShea

Community Expert

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.

Translate

Nancy O'Shea— Product User & Community Expert

T

Trains1985

Inspiring

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

Translate

Nancy OShea

Community Expert

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

For better answers, post the URL.

Translate

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.