CODEWITHSUNDEEP
htmlcss
Aso
Aso

Reputation: 641

How to remove extra spaces between of divs and border radius

The .inner_post have 6 children divs .post_part those divs always have little spaces between each other! especially when Zoom, and the first, last 'post_part are more spaces of corners.
I want to remove that spaces of each part of divs and remove spaces of radius corners.

Screen shoot:
enter image description here

CodePen

:root {
        --post_loader: 100%;
        --main_post_width: 360px;
        /*calc(var(--post_loader) / 4);*/
        /* 360px; */
        --main_post_height: 444px;
        /*444px;*/
        --inner_post_width: 100%;
        --inner_post_height: 100%;
        --main_post_radus: 8px;
        --main-post-box-shadow-width: 6px;
    }
*, html, body {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    font-family: npl;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    font-weight: 100;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    text-overflow: ellipsis;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    transition: all .2s;
}

    section.post_loader {
        position: relative;
        display: block;
        width: var(--post_loader);
        height: auto;
        background-color: #ffd600;
        overflow: hidden;
    }

    section.post_loader div.post_loader_inside {
        height: auto;
        background-color: #000000;
        width: 95%;
        text-align: center;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, calc(var(--main_post_width) + 25px));
        grid-auto-rows: calc(var(--main_post_height) + 25px);
        grid-gap: 25px;
        padding: 25px 25px;
        justify-content: center;
        justify-items: center;

    }

    div.post_loader_inside div.main_post {
        background-color: #ff0000;
        width: var(--main_post_width);
        height: var(--main_post_height);
        position: relative;
        display: inline-block;
        border-radius: var(--main_post_radus);
        transition: width, height 0s, background-color 0.3s;
    }

    div.main_post div.inner_post {
        display: block;
        width: var(--inner_post_width);
        height: var(--inner_post_height);
        border-radius: var(--main_post_radus);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0px 0px 0px 10px #ffffff;
    }

    div.main_post div.inner_post div.post_part {
        width: 100%;
        display: block;
        height: calc(var(--main_post_height) / 6);
        background-color: #ffffff;
    }

    div.post_main_part_1:first-child,
    div.post_part:first-child {
        border-top-left-radius: var(--main_post_radus);
        border-top-right-radius: var(--main_post_radus);
    }

    div.post_main_part_2:last-child,
    div.post_part:last-child {
        border-bottom-left-radius: var(--main_post_radus);
        border-bottom-right-radius: var(--main_post_radus);
    }

    div.post_main_part_1 div.part_3 {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    div.post_main_part_2 div.part_4 {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }


    div.post_main_part_1,
    div.post_main_part_2 {
        width: 100%;
        margin: 0 auto;
        position: absolute;
        left: 50%;
        top: auto;
        bottom: auto;
        right: auto;
        transform: translateX(-50%);
        /* height: calc(var(--main_post_height) / 2 - var(--main-post-box-shadow-width) / 2); */
        height: 50%;
    }

    div.post_main_part_1 {
        top: 0;
        bottom: auto;
    }

    div.post_main_part_2 {
        top: calc(-50% + var(--main_post_height));
        bottom: 0;
    }
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
</head>
  <body>
    <div class="wrapper">
        <section class="post_loader">
            <div class="post_loader_inside">
                <div class="main_post">
                    <div class="inner_post">
                        <div class="post_main_part_1">
                            <div class="post_part part_1"></div>
                            <div class="post_part part_2"></div>
                            <div class="post_part part_3"></div>
                        </div>
                        <div class="post_main_part_2">
                            <div class="post_part part_4"></div>
                            <div class="post_part part_5"></div>
                            <div class="post_part part_6"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</body>

</html>

Upvotes: 1

Views: 162

Answers (1)

A Haworth
A Haworth

Reputation: 36567

You are seeing edge effects, sort of like rounding errors, on the positioning of the elements so sometimes (at some zoom levels) the background of an ancestor element is peeping through.

The problem stems from the system trying to match one CSS pixel or part of a pixel to several screen pixels (especially on modern screens). Sometimes a screen pixel gets 'left behind' so the sizing and/or positioning isn't exact in CSS pixel terms.

Your CSS calculation divides a number by 6 - there may be part pixels because of that.

A hacky way of getting round this is to add a couple of pixels to the height of each of those elements and to set them up one px (e.g. with negative top margin).

That way you get overlap of the elements and the background of the ancestor can't peep through.

:root {
  --post_loader: 100%;
  --main_post_width: 360px;
  /*calc(var(--post_loader) / 4);*/
  /* 360px; */
  --main_post_height: 444px;
  /*444px;*/
  --inner_post_width: 100%;
  --inner_post_height: 100%;
  --main_post_radus: 8px;
  --main-post-box-shadow-width: 6px;
}

*,
html,
body {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  font-family: npl;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  font-weight: 100;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-overflow: ellipsis;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  transition: all .2s;
}

section.post_loader {
  position: relative;
  display: block;
  width: var(--post_loader);
  height: auto;
  background-color: #ffd600;
  overflow: hidden;
}

section.post_loader div.post_loader_inside {
  height: auto;
  background-color: #000000;
  width: 95%;
  text-align: center;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, calc(var(--main_post_width) + 25px));
  grid-auto-rows: calc(var(--main_post_height) + 25px);
  grid-gap: 25px;
  padding: 25px 25px;
  justify-content: center;
  justify-items: center;
}

div.post_loader_inside div.main_post {
  background-color: #ff0000;
  width: var(--main_post_width);
  height: var(--main_post_height);
  position: relative;
  display: inline-block;
  border-radius: var(--main_post_radus);
  transition: width, height 0s, background-color 0.3s;
}

div.main_post div.inner_post {
  display: block;
  width: var(--inner_post_width);
  height: var(--inner_post_height);
  border-radius: var(--main_post_radus);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 0px 10px #ffffff;
}

div.main_post div.inner_post div.post_part {
  width: 100%;
  display: block;
  height: calc(var(--main_post_height) / 6 + 2px);
  margin-top: -1px;
  background-color: #ffffff;
}

div.post_main_part_1:first-child,
div.post_part:first-child {
  border-top-left-radius: var(--main_post_radus);
  border-top-right-radius: var(--main_post_radus);
}

div.post_main_part_2:last-child,
div.post_part:last-child {
  border-bottom-left-radius: var(--main_post_radus);
  border-bottom-right-radius: var(--main_post_radus);
}

div.post_main_part_1 div.part_3 {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

div.post_main_part_2 div.part_4 {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

div.post_main_part_1,
div.post_main_part_2 {
  width: 100%;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: auto;
  bottom: auto;
  right: auto;
  transform: translateX(-50%);
  /* height: calc(var(--main_post_height) / 2 - var(--main-post-box-shadow-width) / 2); */
  height: 50%;
}

div.post_main_part_1 {
  top: 0;
  bottom: auto;
}

div.post_main_part_2 {
  top: calc(-50% + var(--main_post_height));
  bottom: 0;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Index</title>
</head>

<body>
  <div class="wrapper">
    <section class="post_loader">
      <div class="post_loader_inside">
        <div class="main_post">
          <div class="inner_post">
            <div class="post_main_part_1">
              <div class="post_part part_1"></div>
              <div class="post_part part_2"></div>
              <div class="post_part part_3"></div>
            </div>
            <div class="post_main_part_2">
              <div class="post_part part_4"></div>
              <div class="post_part part_5"></div>
              <div class="post_part part_6"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</body>

</html>

Rather than do the calculation yourself though you may like to investigate using CSS flex or grid to set out those elements. It may be the system will cope better with the part pixel situation.

Upvotes: 1

Related Questions