Question 45065 in Html Question posted in
Some basic documentation can be found here.

Adding border changes width relative to parent div – Html

I have the following CSS:

.subtask {
  background: var(--offwhite-color);
  margin: 0.3em;
  padding: .625em 1.25em;
  width: 60%;
  margin-left: .9em;
}

.subtask.highlight {
  border-left: .3em solid var(--secondary-color);
}

where .subtask.highlight is only rendered onClick(). However, this extends the width past the fixed width compared to when the .highlight wasn’t rendered. I’d like the width to stay the same, but add the border as is on the left side. How can I accomplish this?

Looking in dev tools, it seems like none of my specifications are being overriden, so I’m wondering what’s going on.

Tags:

2

Answers


  1. 0

    Try to add transparent border to subtask class

    .subtask {
      background: var(--offwhite-color);
      margin: 0.3em;
      padding: .625em 1.25em;
      width: 60%;
      margin-left: .9em;
      border-left: .3em solid transparent;
    }
    
    .subtask.highlight {
      border-left: .3em solid var(--secondary-color);
    }
    Login or Signup to reply.
  2. 0

    Try to add box-sizing: border-box;

    .subtask {
  background: var(--offwhite-color);
  margin: 0.3em;
  padding: .625em 1.25em;
  width: 60%;
  margin-left: .9em;
}

  .subtask.highlight {
    box-sizing: border-box;
    border-left: .3em solid var(--secondary-color);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search