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

Html – CSS: Gap between div and border-bottom, incorrect border-radius and positioning

I am attempting to make a card game, but when I try to add multicolored, double sided borders to it, it does not work. What I was trying to make was an onclick to change the border color, but that led me to trying this, which didn’t work.

My original attempt was a standalone transition, but it was too sudden, and didn’t either fade into a color, or be double-sided like I wanted. My second attempt worked, but looks like this when it’s built:

html,
body {
  font-family: "Space Mono", monospace;
  color: white;
  width: 100%;
  height: 100%;
}

card {
  width: calc(70px * 2);
  height: calc(100px * 2);
  background: #3b3b3b;
  border-radius: 1em;
  perspective: 600px;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.cardfront,
.cardback {
  backface-visibility: hidden;
  position: absolute;
  height: 100%;
  width: 100%;
}

.evilcardfront {
  border-top: 10px solid orange;
  border-bottom: 6px solid orange;
}

.evilcardback {
  border-top: 10px solid maroon;
  border-bottom: 6px solid maroon;
}

.flipped {
  transform: rotateY(180deg);
}

.cardback {
  transform: rotateY(180deg);
  font-size: medium;
  text-align: center;
  padding-top: 10px;
}

.common {
  border-top: 10px solid slategray;
  border-bottom: 6px solid slategray;
}
<div style="display: flex;">

  <card class='evil' onclick='if (!this.classList.contains("flipped")) { this.classList.add("flipped") }'>
    <div class='cardfront evilcardfront'></div>
    <div class='cardback evilcardback'><span id='name'>Name</span><br><span id='type' style='color: fuchsia; font-size: small;'>type</span><br><span>this card has misplaced borders with a gap between them</span></div>
  </card>

  <card class='common' onclick='if (!this.classList.contains("flipped")) { this.classList.add("flipped") }'>
    <div class='cardfront'></div>
    <div class='cardback'><span id='name'>Name</span><br><span id='type' style='color: fuchsia; font-size: small;'>type</span><br><span>this card is correct</span></div>
  </card>

</div>

I can’t find what could be causing the gap. The background of the element doesn’t span the height of the element, the border-radius is also messed up, and the bottom border moves downward when it’s flipped.

jsfiddle

Tags:

2

Answers


  1. 0

    You have added the borders to different elements, which is why it seems there is a gap in the bottom of evil.

    Here is the fixed version:
    https://jsfiddle.net/Anisi/hxamb42v/4/

    I only styled the card instead of card > div. Also handled the flipped card style with .evil.flipped.

    Login or Signup to reply.
  2. 0

    The gap is because you use border in a child and put the background color in the parent, the size of border will create a gap.
    You can use:

    box-sizing: border-box;

    To remove this gap, and use better CSS to handle more efficiently what you want to achieve.
    Check here: https://jsfiddle.net/jyxbm83k/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search