CSS border greater than it should be-CodePudding

console.log('hello!')

.item {
  display: flex;
  flex-wrap: wrap;
}

.items {
  border: 1px solid red;
  width: 200px;
  padding: 10px;
}

<body>
  <h1>Hello there!</h1>

  <div >
    <div >
      <h4>Card 1</h4>
      <span>Card content</span>
    </div>
    <div >
      <h4>Card 1</h4>
      <span>Card content</span>
    </div>
    <div >
      <h4>Card 1</h4>
      <span>Card content</span>
    </div>
    <div >
      <h4>Card 1</h4>
      <span>Card content</span>
    </div>
    <div >
      <h4>Card 1</h4>
      <span>Card content</span>
    </div>
    <div >
      <h4>Card 1</h4>
      <span>Card content</span>
    </div>
    <div >
      <h4>Card 1</h4>
      <span>Card content</span>
    </div>
  </div>
</body>

Here I need to set red border for my cards but for this borders width is 2px but I need 1 px for all borders. How can I fix it?

CodePudding user response：

Neighboring borders are the core problem here. There're different ways to fix it, one of them could involve forcibly removing (de-duplicating) borders that appear close to each other. However, I don't think it's a good option, especially since it doesn't allow free flow of your cards (in case of regrouping - due to window width changes).

You could consider adding margins between cards, so as the cards would look cleaner.

.item {
  display: flex;
  flex-wrap: wrap;
}

.items {
  border: 1px solid red;
  width: 200px;
  padding: 10px;
  margin: 5px;
}

The same look can be achieved when grid-gap:10px used.

.item {
  display: flex;
  flex-wrap: wrap;
  grid-gap:10px;
}

.items {
  border: 1px solid red;
  width: 200px;
  padding: 10px;
}

CodePudding user response：

Hi there if you are using display flex, you can use, grid-gap property, gap property, padding property as per your gap you want.