Removing Display:Flex Adds Spaces Around a Link. Why

Removing display:flex adds spaces around a link. Why?

It's because flexbox remove the default white space between inline or inline-block elements.

Here is a code without flexbox where we have white space:

.box {  font-size:30px;}
<div class="box">  <a>click</a>  <a>here</a></div>

CSS flex box last space removed

Reason

When you don't use display: flex, the your layout becomes something like

<div class="has_flex"><!--
  --><anonymous style="display: inline">Some text </anonymous><!--
  --><a         style="display: inline">Link</a><!--
--></div>

The text (including the space at the end) is wrapped inside an anonymous inline box:

Any text that is directly contained inside a block container element (not inside an inline element) must be treated as an anonymous inline element.

However, Flexbox layout blockifies the flex items:

The display value of a flex item is blockified: if
the specified display of an in-flow child of an element
generating a flex container is an inline-level value, it computes
to its block-level equivalent.

Then, the layout will be like

<div class="has_flex"><!--
  --><anonymous style="display: block">Some text </anonymous><!--
  --><a         style="display: block">Link</a><!--
--></div>

This might not seem directly related, but it's relevant because of the white-space processing model:

Then, the block container's inlines are laid out. [...] As each line
is laid out, [...]


  1. If a space (U+0020) at the end of a line has white-space
    set to normal, nowrap, or pre-line, it is also removed.

So when the anonymous element and the link were both inline, the space was at the middle of a line. If you had multiple spaces they would collapse into a single one, but not disappear completely.

However, when you use flexbox, each flex item has its own lines, and the space is therefore at the end of a line. So it's removed.

Note this problem is not specific of flexbox, spaces at the end of an inline-block are also removed.

.in-blo {  display: inline-block;}
<div><span class="inline">Some text </span><a href="link">Link</a></div><div><span class="in-blo">Some text </span><a href="link">Link</a></div>

How to remove whitespace in flex layout

clear: left; will not solve your issue properly.

You use flexbox but some flexbox property is wrong. overflow creating issue in mobile devices. You have to remove overflow-x: hidden; from html,boy leave default value. flex-wrap: 100vh; is wrong it should be flex-wrap: wrap | nowrap; read flex-wrap. justify-content: left; left is wrong it should be justify-content: flex-start | flex-end | center | stretch | space-between | space-around | space-evenly; Other values Like left right, start and end have browser support issue read justify-content. Same for align-items read align-items. I fix responsive css issue. Also .boxcontent width will be 100%.

You have read flexbox.

Here is modified css

/* Master styles */

html, body {
    font-family: "Lato", sans-serif;
    margin: 0px;
    height: 100%;
    width: 100%;
    padding: 0px;
}

.boxcontent {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.box {
    position: relative;
    flex-basis: calc(20% - 20px);
    flex-grow: 0;
    flex-shrink: 0;
    max-width: calc(20% - 20px);
    height: 300px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 10px;
    transition: 0.5s;
}

@media (max-width: 767px){
  .box{
    flex-basis: calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
}
@media (max-width: 575px){
  .box{
    flex-basis: calc(100% - 20px);
    max-width: calc(100% - 20px);
  }
}

.box:hover {
    height: 400px;

}

.box  .imgBx{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.box .imgBx img {
    max-width: 100%;
    opacity: 0.1;
    transition: 0.5s;
}

.box:hover .imgBx img{
    opacity: 1;
}

.box::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;

    z-index: -1;
}

.box::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -2;
    filter: blur(40px);
    background: #060C21;
}

.box:before,
.box::after 
{
    background-image: linear-gradient(235deg,#89ff00,#010615,#00bcd4);
}

.box:nth-child(2) before,
.box::nth-child(2) after 
{
    background-image: linear-gradient(235deg,#ff005e,#010615,#fbff00);
}

.box:nth-child(3) before,
.box::nth-child(3) after 
{
    background-image: linear-gradient(235deg,#772aff,#010615,#2196f3);
}

.box .content {
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 90px;
    background: rgba(red, green, blue, alpha);
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    opacity: 0;
    transition: 0.5s;

}

.box:hover .content
{
 opacity: 1;
}

.box .content h2
{
    font-size: 20px;
    color: #fff;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 1px;
}

header {
    background-color: crimson;
    height: 66px;
}

header .logo {
    float: left;
    padding-top: 10px;
    height: inherit;
    font-weight: bolder;
    margin-left: 2em;


}

header ul {
    float: right;
    margin: 0px;
    padding: 0px;
    list-style: none;
}

header * {
    color: white;
}
header .logo-text {
    font-weight: bolder;
    font-size: xx-large;
    font-family: 'Candal', serif;
}

header ul li {
    float: left;
}

header ul li a {
    display: block;
    padding: 21px;
    font-size: 1.1em;
    text-decoration: none;
    font-family: 'Candal', serif;
}

header ul li a:hover {
    background: rgb(116, 5, 27);
    transition: 0.5s
}



    /* Bottom footer syles */
.footer {
    background: #303036;
    color: #d3d3d3;
    height: 400px;
    position: absolute;

}

.footer .footer-bottom {
    background: #343a40;
    color: white;
    height: 50px;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding-top: 20px;

}
.footer .footer-content {
    height: 350px;
    display:flex
}

.footer .footer-content .footer-section {
    flex: 1;
    padding: 25px;
}

.footer .footer-content .about h1 span {
    color: crimson;
    font-weight: bolder;
    font-size: 1.3em;
}

.footer .footer-content h1,
.footer .footer-content h2 {
    color: white;
}

.footer .footer-content .about .contact span {
    display: block;
    font-size: 1.1em;
    font-weight: bolder;
    margin-bottom: 8px;
}
.footer .footer-content .links ul a {
    display: block;
    margin-bottom: 10px;
    font-size: 1.2em;
    color: white;
}

.footer .footer-content .links ul a:hover{
    color: white;
    margin-left: 15px;
    transition: all .3s;
}

.footer .footer-content .contact-form .contact-input {
    background: #272727;
    color: #bebdbd;
    margin-bottom: 10px;
    line-height: 1.5rem;
    padding: .9rem 1.4rem;
    border: none;
    display: block;
}
.footer .footer-content .contact-form .contact-input:focus {
    background: #1a1a1a;
}
.btn-big {
    padding: .7rem 1.3rem;
    line-height: 1.3rem;
    background-color: #006669;
    border:none;
    font-weight: bolder;
    font-size: medium;
    color: white;
}




  @media only screen and (max-width: 934px) {
      .footer {
          height: auto;
      }
      .footer .footer-content {
          height: auto;
          flex-direction: column;
      }
      .footer .footer-content .contact-form {
          padding-bottom: 90px;
      }
      .boxcontent {
          height: auto;
      }
  }

  @media only screen and (max-width: 750){
    .footer {
        height: auto;
    }
    .footer .footer-content {
        height: auto;
        flex-direction: column;
    }
    .footer .footer-content .contact-form {
        padding-bottom: 90px;
    }
    .boxcontent {
        height: auto;
    }
}

Snippet is below

/* Master styles */
html, body {    font-family: "Lato", sans-serif;    margin: 0px;    height: 100%;    width: 100%;    padding: 0px;}
.boxcontent {    display: flex;    flex-direction: row;    justify-content: center;    flex-wrap: wrap;    width: 100%;}
.box {    position: relative;    flex-basis: calc(20% - 20px);    flex-grow: 0;    flex-shrink: 0;    max-width: calc(20% - 20px);    height: 300px;    display: flex;    justify-content: flex-start;    align-items: flex-start;    margin: 10px;    transition: 0.5s;}
@media (max-width: 767px){  .box{    flex-basis: calc(50% - 20px);    max-width: calc(50% - 20px);  }}@media (max-width: 575px){  .box{    flex-basis: calc(100% - 20px);    max-width: calc(100% - 20px);  }}
.box:hover {    height: 400px;
}
.box  .imgBx{    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    padding: 10px;    box-sizing: border-box;}
.box .imgBx img {    max-width: 100%;    opacity: 0.1;    transition: 0.5s;}
.box:hover .imgBx img{    opacity: 1;}
.box::before {    content: '';    position: absolute;    top: -2px;    left: -2px;    right: -2px;    bottom: -2px;       z-index: -1;}
.box::after {    content: '';    position: absolute;    top: -2px;    left: -2px;    right: -2px;    bottom: -2px;    z-index: -2;    filter: blur(40px);    background: #060C21;}
.box:before,.box::after {    background-image: linear-gradient(235deg,#89ff00,#010615,#00bcd4);}
.box:nth-child(2) before,.box::nth-child(2) after {    background-image: linear-gradient(235deg,#ff005e,#010615,#fbff00);}
.box:nth-child(3) before,.box::nth-child(3) after {    background-image: linear-gradient(235deg,#772aff,#010615,#2196f3);}
.box .content {    position: absolute;    bottom: 0;    left: 10px;    right: 10px;    bottom: 10px;    height: 90px;    background: rgba(red, green, blue, alpha);    display: flex;    justify-content: center;    text-align: center;    align-items: center;    opacity: 0;    transition: 0.5s;    }
.box:hover .content{ opacity: 1;}
.box .content h2{    font-size: 20px;    color: #fff;    font-weight: 500;    line-height: 20px;    letter-spacing: 1px;}
header {    background-color: crimson;    height: 66px;}
header .logo {    float: left;    padding-top: 10px;    height: inherit;    font-weight: bolder;    margin-left: 2em;     }
header ul {    float: right;    margin: 0px;    padding: 0px;    list-style: none;}
header * {    color: white;}header .logo-text {    font-weight: bolder;    font-size: xx-large;    font-family: 'Candal', serif;}
header ul li {    float: left;}
header ul li a {    display: block;    padding: 21px;    font-size: 1.1em;    text-decoration: none;    font-family: 'Candal', serif;}
header ul li a:hover {    background: rgb(116, 5, 27);    transition: 0.5s}


    /* Bottom footer syles */.footer {    background: #303036;    color: #d3d3d3;    height: 400px;    position: absolute;    }
.footer .footer-bottom {    background: #343a40;    color: white;    height: 50px;    width: 100%;    text-align: center;    position: absolute;    bottom: 0px;    left: 0px;    padding-top: 20px; }.footer .footer-content {    height: 350px;    display:flex}
.footer .footer-content .footer-section {    flex: 1;    padding: 25px;}
.footer .footer-content .about h1 span {    color: crimson;    font-weight: bolder;    font-size: 1.3em;}
.footer .footer-content h1,.footer .footer-content h2 {    color: white;}
.footer .footer-content .about .contact span {    display: block;    font-size: 1.1em;    font-weight: bolder;    margin-bottom: 8px;}.footer .footer-content .links ul a {    display: block;    margin-bottom: 10px;    font-size: 1.2em;    color: white;}
.footer .footer-content .links ul a:hover{    color: white;    margin-left: 15px;    transition: all .3s;}
.footer .footer-content .contact-form .contact-input {    background: #272727;    color: #bebdbd;    margin-bottom: 10px;    line-height: 1.5rem;    padding: .9rem 1.4rem;    border: none;    display: block;}.footer .footer-content .contact-form .contact-input:focus {    background: #1a1a1a;}.btn-big {    padding: .7rem 1.3rem;    line-height: 1.3rem;    background-color: #006669;    border:none;    font-weight: bolder;    font-size: medium;    color: white;}



  @media only screen and (max-width: 934px) {      .footer {          height: auto;      }      .footer .footer-content {          height: auto;          flex-direction: column;      }      .footer .footer-content .contact-form {          padding-bottom: 90px;      }      .boxcontent {          height: auto;      }  }
  @media only screen and (max-width: 750){    .footer {        height: auto;    }    .footer .footer-content {        height: auto;        flex-direction: column;    }    .footer .footer-content .contact-form {        padding-bottom: 90px;    }    .boxcontent {        height: auto;    }}
<html lang="eng">
<head>    <meta charset="utf-8" />    <title>Pagel</title>    <meta name="viewpoint" content="width=device-width, initial-scale=1">    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap" rel="stylesheet">
    <!-- Google font -->    <link href="https://fonts.googleapis.com/css2?family=Candal&display=swap" rel="stylesheet">        <link rel="stylesheet" href="styles.css"></head>
<body>    <header>        <div class="logo">            <div class="logo-text"><span>Pagel</span>Romania</div>        </div>        <ul class="nav">            <li><a href="#">Acasa</a></li>            <li><a href="#">Despre Noi</a></li>            <li><a href="#">Produse</a></li>        </ul>    </header> <div class="boxcontent">    <div class="box">        <div class="imgBx">            <img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">        </div>        <div class="content">            <h2>Mortar de subturnare</h2>        </div>    </div>    <div class="box">        <div class="imgBx">            <img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">        </div>        <div class="content">            <h2>Mortar de subturnare</h2>        </div>    </div>    <div class="box">        <div class="imgBx">            <img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">        </div>        <div class="content">            <h2>Mortar de subturnare</h2>        </div>    </div>    <div class="box">        <div class="imgBx">            <img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">        </div>        <div class="content">            <h2>Mortar de subturnare</h2>        </div>    </div>    <div class="box">        <div class="imgBx">            <img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">        </div>        <div class="content">            <h2>Mortar de subturnare</h2>        </div>    </div></div>

    <!-- Bottom footer -->    <div class="footer">        <div class="footer-content">            <div class="footer-section about">                <h1 class="brand"><span>Pagel</span> Romania</h1>                <p>De peste 40 de ani firma PAGEL SPEZIAL-BETON GmbH & Co. KG din Essen, a contribuit în mod hotărîtor                 la dezvoltarea şi perfecţionarea mortarelor de subturnare, precum şi a altor mortare speciale.</p>                <div class="contact">                    <span>☎   0762-837-458</span>                    <br>                    <span>✉   office@solmat.ro</span>                </div>                <div class="socials">                    <a href="#"><i class="fab fa-facebook"></i></a>                    <a href="#"><i class="fab fa-linkedin"></i></a>                    <a href="#"><i class="fab fa-twitter"></i></a>                    <a href="#"><i class="fab fa-youtube"></i></a>
                </div>            </div>            <div class="footer-section links">            <h2>Link-uri rapide</h2>            <br/>            <ul>                            <a href="#">                    <li>Conditii generale</li></a>                <a href="#">                    <li>Politica de confidentialitate</li>                </a>                <a href="#">                    <li>Linkuri</li>                </a>                <a href="#">                    <li>Despre noi</li>                </a>                <a href="#">                    <li>Notificari site</li>                </a>                <a href="#">                    <li>Home</li>                </a>            </ul>            </div>            <div class="footer-section contact-form">                <h2>Contactati-ne</h2>                <br>                <form action="index.html" method="POST">                <input type="email" name="email" class="text-input contact-input" placeholder="Adresa dvs. de email">                <textarea name="mesaj" class="text-input contact-input" placeholder="Mesajul dvs."></textarea>                 <button type="submit" class="btn btn-big">                    <i class="fas fa-envelope">                    </i>                    Trimiteti                </button>                </form>            </div>
        </div>        <div class="footer-bottom">            © pagel.ro ┃ Design by Toma Dragos        </div>

    </div>
</body><script>    const portfolioItems = document.querySelectorAll('.portfolio-item-wrapper')
    portfolioItems.forEach(portfolioItem => {         portfolioItem.addEventListener('mouseover', () => {              portfolioItem.childNodes[1].classList.add('img-darken');         })         portfolioItem.addEventListener('mouseout', () => {              portfolioItem.childNodes[1].classList.remove('img-darken');         })
    })</script></html>

Why does my HTML tag remove the space before it and why doesn't line break work here?

Everything withing flex box will be flexed, the best way to handle this is to have a container for your text within a flex box.
Have a look below.

#header-container{  background-color: #374457;  height: 100vh;  width: 100vw;  display: flex;  align-items: center;  justify-content: center;  color: white;  font-family: 'Roboto', sans-serif;  font-size: 1em;}
<div id="header-container"><div>  Hi, I'm <b>Name</b><br />  Student at <b>University</b>  </div></div>

Flexbox: Removing blank space after applying media query

You should use flexbox in your product-1 to center items

.product-1 {
        display: flex;
        flex-flow: column;
        align-items: center;
        width: 100%;
    }

.container {
    width: 95%;
    max-width: 1280px;
    margin: 0 auto;
}

img {
    max-width: 100%;
    width: 400px;
}

.products {
    display: flex;
    justify-content: space-evenly;
}

.product-1 {
    width: 33%;
    margin: 0 0.50em;
}

@media (max-width: 600px) {
    .products {
        flex-direction: column;
    }

    .product-1 {
        display: flex;
        flex-flow: column;
        align-items: center;
        width: 100%;
    }

    p {
        width: 75%;
    }
}
<body>
        <div class="container">
            <div class="products">
                <div class="product product-1">
                    <img src="images/product-1.jpg">
                    <h2>Lorem ipsum dolor sit amet.</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fugit ad in dolores 
                        veniam hic cupiditate aliquam perferendis velit odit.
                    </p>
                </div>

                <div class="product product-1">
                    <img src="images/product-2.jpg">
                    <h2>Lorem ipsum dolor sit amet.</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fugit ad in dolores
                        veniam hic cupiditate aliquam perferendis velit odit.
                    </p>
                </div>

                <div class="product product-1">
                    <img src="images/product-3.jpg">
                    <h2>Lorem ipsum dolor sit amet.</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fugit ad in dolores
                        veniam hic cupiditate aliquam perferendis velit odit.
                    </p>
                </div>
            </div>
        </div>
    </body>

Related Topics

How to Make React CSS Import Component-Scoped

How to Animate Handwriting Text on the Web Page Using Svg

Top Nav Bar Blocking Top Content of the Page

How to Style a Div to Be a Responsive Square

How to Validate Vendor Prefixes in CSS Like -Webkit- and -Moz-

How to Change Flexbox Wrap

How to Set Up Fixed Width For ≪Td≫

In CSS Difference Between "." and "#" When Declaring a Set of Styles

Does Element Width Include Padding

Css: Center Element Within a ≪Div≫ Element

Gradients in Internet Explorer 9

How to Make CSS Visible Only For Opera

Why Doesn't the CSS Calc() Function Work For Me

How to Scale CSS Sprites When Used as Background-Image

Padding-Bottom/Top in Flexbox Layout

Changing :Hover to Touch/Click For Mobile Devices

Font Awesome 5 Unicode

A Grid Layout With Responsive Squares


Leave a reply



Submit