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

by

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>

We can remove this white space by removing it from the markup or using any common way:

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

Or by making the div a flexbox container:

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

If we check the specification:

Each in-flow child of a flex container becomes a flex item, and each
contiguous sequence of child text runs is wrapped in an anonymous
block container flex item. However, if the entire sequence of child
text runs contains only white space (i.e. characters that can be
affected by the white-space property) it is instead not rendered (just
as if its text nodes were display:none).

So in our code we have two child items and a sequence of white space that is not rendred.

More Related Contents:

  1. Make a div span two rows in a grid
  2. Bootstrap align navbar items to the right
  3. Aligning grid items across the entire row/column (like flex items can)
  4. What’s the difference between align-content and align-items?
  5. How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]
  6. How can I make Flexbox children 100% height of their parent?
  7. Bootstrap 4 navbar with 2 rows
  8. What’s the difference between display:inline-flex and display:flex?
  9. Scrolling a flexbox with overflowing content
  10. A grid layout with responsive squares
  11. Bootstrap 4 masonry layout utilizing flexbox grid
  12. How to change flexbox wrap?
  13. Create a Masonry grid with flexbox (or other CSS)
  14. css grid of squares with flexbox
  15. CSS flexbox not working in IE10
  16. Set flexbox children to have different heights to use up available space
  17. Height 100% on flexbox column child [duplicate]
  18. Are flex items block level element?
  19. Bootstrap change order of columns
  20. text-overflow ellipsis on flex child not working [duplicate]
  21. What are allowed values of the `display` property for a flex-item? (layout of flex-item’s children is irrelevant)
  22. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  23. How can I change the order of Bootstrap columns?
  24. The difference between flex:1 and flex-grow:1
  25. How do I set distance between flexbox items?
  26. Difference between flex-end and end? [duplicate]
  27. How to control number of items per row using media queries in Flexbox?
  28. How to stretch children to fill cross-axis?
  29. Issue when centering vertically with flexbox when heights are unknown
  30. Do I not understand the flex-grow property?

Leave a Comment