#TIL | display: contents
Some HTML elements does not have a visual styling, because their purpose is to ‘group’ others. But those wrappers have sometimes a negative effect on styling with techniques like grid
or flex
.
display: contents
makes those elements a hidden ghost if needed, for easier styling of its children.
<style>
.box-content { display: contents }
</style>
<div class="box">
<div class="box-content">
<h2><!-- Title --></h2>
<p><!-- Description --></p>
</div>
<img src="image.jpg" alt="">
</div>
… will be parsed by the browser like:
<div class="box">
<h2><!-- Title --></h2>
<p><!-- Description --></p>
<img src="image.jpg" alt="">
</div>
You can interact with this note (applause, criticism, whatever) by mention it in one of your posts, which will be shown here as a Webmention.
Webmentions
No Webmentions yet...