Child 'react-router-dom' <Link> not respecting parent BS padding, sibling margins. Can't figure out

I have a react component, called 'dashboard.js':
const Dashboard = () => {
return (
<div className="component dashboard">
<h1>dashboard</h1>
<Link to="/">Back to Login</Link>

<div className="border border-primary border- w-100 p-3">
<h2>Apps</h2>
<div className="appBox p-2 mt-4">
<h3 className="text-center me-2">
Initial Inspection <br />
(checking in cars)
</h3>
<Link to="/initial-inspection">Start</Link>
</div>
</div>
</div>
);
};

export default Dashboard;
const Dashboard = () => {
return (
<div className="component dashboard">
<h1>dashboard</h1>
<Link to="/">Back to Login</Link>

<div className="border border-primary border- w-100 p-3">
<h2>Apps</h2>
<div className="appBox p-2 mt-4">
<h3 className="text-center me-2">
Initial Inspection <br />
(checking in cars)
</h3>
<Link to="/initial-inspection">Start</Link>
</div>
</div>
</div>
);
};

export default Dashboard;
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
No description
No description
2 Replies
thethingisback
thethingisback15mo ago
This is also my CSS:
*, *:before, *:after{
margin:0;
padding:0;
box-sizing: border-box !important;
}

body{
font-family: 'HolmesReg';
}

button, a{
padding: .5rem;
border: 1px solid black;
/* box-sizing: border-box !important; */
}

.component{
padding: 2rem;
height: 100vh;
display:flex;
flex-direction: column;
align-items:center;
/* background-color: grey; */
}

.component:not(.ReconApp) > a,
.component:not(.ReconApp) > h1{
align-self: flex-start;
}

.component > *, a, .appBox{
border-radius: 5px;
}

/* all direct children (<h>, <btn> & <div>) get padding */
.component > *:not(h1):not(a){
margin-top: 4rem;
}

a{
/* padding: .5rem; */
box-sizing:border-box !important;
}

.form-label{
font-size:1.2em !important;
}

.loginBox{
position:absolute;
top:42%;
/* left:50%; */
transform:translateX(-50%);
transform: translateY(-50%);
margin:2rem;
/* width:60%; */
}

h1{
font-size: 1.6em !important;
}

h2{
font-size: 1.5em !important;
}

h3{
font-size: 1.4em !important;
line-height: 1.75rem !important;
}

.component > h1{
padding: .5rem;
display:flex;
justify-content: center;
align-items: center;
text-align:center;
}

/* Home Page Form Note */
small{
line-height:1.2;
font-size: 1rem !important;
letter-spacing:1.25px !important;
/* font-size:; */
}

.thirtyDaysSpace{
margin-right:.25rem
}
*, *:before, *:after{
margin:0;
padding:0;
box-sizing: border-box !important;
}

body{
font-family: 'HolmesReg';
}

button, a{
padding: .5rem;
border: 1px solid black;
/* box-sizing: border-box !important; */
}

.component{
padding: 2rem;
height: 100vh;
display:flex;
flex-direction: column;
align-items:center;
/* background-color: grey; */
}

.component:not(.ReconApp) > a,
.component:not(.ReconApp) > h1{
align-self: flex-start;
}

.component > *, a, .appBox{
border-radius: 5px;
}

/* all direct children (<h>, <btn> & <div>) get padding */
.component > *:not(h1):not(a){
margin-top: 4rem;
}

a{
/* padding: .5rem; */
box-sizing:border-box !important;
}

.form-label{
font-size:1.2em !important;
}

.loginBox{
position:absolute;
top:42%;
/* left:50%; */
transform:translateX(-50%);
transform: translateY(-50%);
margin:2rem;
/* width:60%; */
}

h1{
font-size: 1.6em !important;
}

h2{
font-size: 1.5em !important;
}

h3{
font-size: 1.4em !important;
line-height: 1.75rem !important;
}

.component > h1{
padding: .5rem;
display:flex;
justify-content: center;
align-items: center;
text-align:center;
}

/* Home Page Form Note */
small{
line-height:1.2;
font-size: 1rem !important;
letter-spacing:1.25px !important;
/* font-size:; */
}

.thirtyDaysSpace{
margin-right:.25rem
}
thethingisback
thethingisback15mo ago
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.
No description
Want results from more Discord servers?
Add your server