Child 'react-router-dom' <Link> not respecting parent BS padding, sibling margins. Can't figure out
I have a react component, called 'dashboard.js':
I've applied react-bootstrap class '.p-2' (.5rem padding all around), to my ".appBox" <div>, and it's being applied to all sides (see pic 1).
Curiously though, the child <Link> is respecting its left-side padding, just not the the .appBox's bottom padding.
I'm also applying a ".me-2" (margin-end 2) to the <Link>'s sibling, to make vertical space between the siblings, pushing <Link> downward (see pic 2), but that is also not having any effect (see pic 2).
What should I be looking at to find this issue? Why the <Link> is unaffected by its container padding or sibling margin?
The only non-Bootstrap class I'm using (in my linked index.css), ".appBox", is only applying a border-radius.
TLDR:
<Link> in my component is not respecting the bootstrap padding of its parent container or bootstrap margins of its sibling (which has Bootstrap class ".p-2").
I'm having trouble connecting to my GitHub repo rn, so I don't have live/repo links right now, but I'll try to update here in a minute.
I just wanted to see if anybody can think of anything it might be from this
2 Replies
This is also my CSS:
Here's another pic, You can see the <Link> that says "Start" isn't obeying the bottom margin of its sibling or the BOTTOM padding of its parent.