CODEWITHSUNDEEP
htmlcss
KestVir
KestVir

Reputation: 350

Inline-block vs inline elements in terms of line-breaks

Inside of a parent element which is a paragraph, there is text and a couple of anchor links. These anchor links have their display set to inline-block and the visual result looks like this: https://i.sstatic.net/TgAzv.jpg

Now if I would change the display to inline, the result looks like this: https://i.sstatic.net/SfXSE.jpg

My question is, why does having the display of the anchors set to inline-block instead of just inline cause this, let's just say "soft line break" ? Because I thought that in terms of line-breaks, both of the displays act in the same way, and don't break at all.

Codepen link for the code: https://codepen.io/Kestvir/pen/zpvmYV

The code for the parent element: 

.footer__copyright {
    border-top: 1px solid #777;
    padding-top: 2rem;
    width: 80%;
    float: right;
}

The code for the anchors: 

footer__link:link, .footer__link:visited {
    color: #f7f7f7;
    background-color: #333;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    transition: all .2s;
}

The anchors are: 

<a href="#" class="footer__link">Jonas Schmedtmann</a>

and

<a href="#" class="footer__link">Advanced CSS and Sass</a>

Upvotes: 1

Views: 458

Answers (1)

Wilson
Wilson

Reputation: 71

The line break happens because the the inline block cannot be split across multiple lines like a normal inline element. It is simply one entire "block unit" that is displayed inline. If that entire unit does not fit, then it will all be wrapped down to the next line.

Upvotes: 1

Related Questions