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

2 Replies

thethingisbackOP•17mo 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
}

thethingisbackOP•17mo 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.

Gaming

Programming

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