I know the famous probleme about space under images, and currently we can turn off it my adding marin 0 or padding 0, oven with some technique like font-size: 0 when the display inline block is active
but here I doesn't understand why it's still here. (I put texts under every images to hide it but if I delete the text the image don't touch my border)
do you have an idée ?
for more comprehension of my bad english here is it a Codepen link : https://codepen.io/quentindigital/pen/KKzmXQd
<style>
@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
*, div, p, img {
padding: 0;
margin: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
font-family: sans-serif;
margin: 0;
background: #ddd;
}
.css-masonry {
-webkit-column-count: 4;
-moz-column-count:4;
column-count: 4;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
column-gap: 1em;
-moz-column-gap: 1.5em;
-webkit-column-gap: 1.5em;
column-gap: 1.5em;
margin: 1.5em;
padding: 0;
font-size: .85em;
}
.item {
display: inline-block;
width: 100%;
font-family: 'Alata', sans-serif;
font-size: 1.8em;
background: #fff;
margin: 0 0 1em;
width: 100%;
-webkit-transition:1s ease all;
border: 2px solid black;
border-radius: 6px;
overflow: hidden; /* to affect the inner elements with the radius */
}
.item img{ max-width:100%; font-size: 0; height: auto; /* to be sure to don't have a spacing after the img due to the inline block function */ }
.item-number {
border: 2px solid black;
border-radius: 50%;
background: #fff;
font-size: 0.8em;
display: flex; /* flex is for center verticaly and horizontaly the number */
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
padding: 0 2px 2px 0; /* I display right and bottom padding because of the font who is not center par default : delete if you change the font */
position: absolute;
margin: 5px;
}
.item .title {
border: 0px solid blue;
padding: 10px 10px 14px;
}
.french {color: grey; font-size: 0.8em;}
@media only screen and (max-width: 420px) {
.css-masonry {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
@media only screen and (min-width: 421px) and (max-width: 768px){
.css-masonry {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (min-width: 769px) and (max-width: 1000px){
.css-masonry {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media only screen and (min-width: 1001px) {
.css-masonry {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
} </style>
<!-- container all the item -->
<div class="css-masonry">
<!-- item -->
<div class="item">
<!-- number of the item -->
<div class="item-number">1</div>
<!-- image -->
<img src="https://scontent-cdt1-1.cdninstagram.com/v/t51.2885-15/e35/36995178_263875847529942_2246967554570452992_n.jpg?_nc_ht=scontent-cdt1-1.cdninstagram.com&_nc_cat=106&_nc_ohc=EnzHOjtds68AX8gg96p&oh=7ce1e58fa146ed92c493dcfac19c74d7&oe=5F714385">
<!-- title if title -->
<div class="title">
This is a pure CSS only responsive masonry grid.
<p class="french">Un grid masonry en pure css</p>
</div>
</div>
<!-- item -->
<div class="item">
<!-- number of the item -->
<div class="item-number">2</div>
<!-- image -->
<img src="https://scontent-cdt1-1.cdninstagram.com/v/t51.2885-15/e35/s1080x1080/75372356_454280415162174_4260765077873658199_n.jpg?_nc_ht=scontent-cdt1-1.cdninstagram.com&_nc_cat=106&_nc_ohc=Nvnwmo7pSLYAX_Sqb7Z&oh=4fea9949444468de1d84affb1b0bbb72&oe=5F701D00">
<div class="title">
Copenhagen
</div>
</div>
<!-- item -->
<div class="item">
<!-- number of the item -->
<div class="item-number">3</div>
<!-- image -->
<img src="https://scontent-cdg2-1.cdninstagram.com/v/t51.2885-15/e35/s1080x1080/67585759_101041704524588_7115246159420840627_n.jpg?_nc_ht=scontent-cdg2-1.cdninstagram.com&_nc_cat=108&_nc_ohc=n13JSRJuSO4AX-Yru9Q&oh=cab36a1bcbad96a7dc0495f6ad24563b&oe=5F705AB4">
<div class="title">
<a href="instagram.com/quentinrenaux" target="_blank">Visit my instagram</a>
</div>
</div>
<!-- item -->
<div class="item">
<!-- number of the item -->
<div class="item-number">4</div>
<!-- image -->
<img src="https://scontent-cdg2-1.cdninstagram.com/v/t51.2885-15/e35/p1080x1080/116910670_636321583927860_1186986929814598848_n.jpg?_nc_ht=scontent-cdg2-1.cdninstagram.com&_nc_cat=100&_nc_ohc=ImTKV8mCBkUAX_wBVuR&oh=f98a82bb7b8c6ae451b905c059eb1e8c&oe=5F7175A4">
<div class="title">
Draw
</div>
</div>
<!-- item -->
<div class="item">
<!-- number of the item -->
<div class="item-number">5</div>
<!-- image -->
<img src="https://scontent-cdt1-1.cdninstagram.com/v/t51.2885-15/e35/12299037_1115951291757226_487763699_n.jpg?_nc_ht=scontent-cdt1-1.cdninstagram.com&_nc_cat=110&_nc_ohc=5uRQjHsE4AEAX_zZajw&oh=c58382e5f3012b6e8bc698ae2a112293&oe=5F6F0F4F">
<div class="title">
3D table
</div>
</div>
<!-- item -->
<div class="item">
<!-- number of the item -->
<div class="item-number">6</div>
<!-- image -->
<img src="https://scontent-cdg2-1.cdninstagram.com/v/t51.2885-15/e35/80889716_177138893664311_3114893289016412030_n.jpg?_nc_ht=scontent-cdg2-1.cdninstagram.com&_nc_cat=111&_nc_ohc=rmC1taLDo9oAX_RFtXR&oh=ed30e253afa25ef4aa38557e3f57e40b&oe=5F6FDE56">
<div class="title">
Mask search
</div>
</div>
<!-- item -->
<div class="item">
<!-- number of the item -->
<div class="item-number">7</div>
<!-- image -->
<img src="https://scontent-cdg2-1.cdninstagram.com/v/t51.2885-15/e35/13126889_210201399365180_922021417_n.jpg?_nc_ht=scontent-cdg2-1.cdninstagram.com&_nc_cat=108&_nc_ohc=Twm7Ef50NyMAX9F6fYU&oh=7d06900a937f72f3fe99b55cb564c605&oe=5F709684">
<div class="title">
Lines
</div>
</div>
<!-- item -->
<div class="item">
<!-- number of the item -->
<div class="item-number">8</div>
<!-- image -->
<img src="https://scontent-cdt1-1.cdninstagram.com/v/t51.2885-15/e35/26871649_1974856766166706_595456387631284224_n.jpg?_nc_ht=scontent-cdt1-1.cdninstagram.com&_nc_cat=110&_nc_ohc=EPtSVvQWX7sAX_EAXWd&oh=78ba051e57f0c4d5cf4d666133e9c26e&oe=5F6F1F74">
<div class="title">
Brother
</div>
</div>
<!-- item -->
<div class="item">
<!-- number of the item -->
<div class="item-number">9</div>
<!-- image -->
<img src="https://scontent-cdt1-1.cdninstagram.com/v/t51.2885-15/e35/30841816_1601177606646754_7608513596833660928_n.jpg?_nc_ht=scontent-cdt1-1.cdninstagram.com&_nc_cat=110&_nc_ohc=beqzT89WF_MAX_jZOrT&oh=284d72126c1a4a009df17eb8f1bc3b4e&oe=5F714F21">
<div class="title">
Display
</div>
</div>
<!-- item -->
<div class="item">
<!-- number of the item -->
<div class="item-number">10</div>
<!-- image -->
<img src="https://scontent-cdg2-1.cdninstagram.com/v/t51.2885-15/e35/s1080x1080/74666962_771575516643056_3608361156276665108_n.jpg?_nc_ht=scontent-cdg2-1.cdninstagram.com&_nc_cat=108&_nc_ohc=-31DW6kwADEAX-gO58h&oh=aac026c26cb1539b62d0b696d008ae0a&oe=5F71EFC6">
<div class="title">
At work
</div>
</div>
<!-- item -->
<div class="item">
<!-- number of the item -->
<div class="item-number">11</div>
<!-- image -->
<img src="https://scontent-cdt1-1.cdninstagram.com/v/t51.2885-15/e35/66907053_141754330253890_2856071181193144578_n.jpg?_nc_ht=scontent-cdt1-1.cdninstagram.com&_nc_cat=110&_nc_ohc=GKJr4aCSjR8AX-YEOp7&oh=839ae9597c07a02addc7d7f28647b9ee&oe=5F709C32">
<div class="title">
Lines #2
</div>
</div>
<!-- item -->
<div class="item">
<!-- number of the item -->
<div class="item-number">12</div>
<!-- image -->
<img src="https://scontent-cdg2-1.cdninstagram.com/v/t51.2885-15/e35/61424547_345090816039122_8009625366607578307_n.jpg?_nc_ht=scontent-cdg2-1.cdninstagram.com&_nc_cat=102&_nc_ohc=dxHlI1km_NMAX9f09Ix&oh=f63dd6182fc408f3afad9d185854ecee&oe=5F7238EA">
<!-- title if title -->
<div class="title">
The photography are from my instagram
<p class="french">Les photographies sont visibles sur mon insta</p>
</div>
</div>
<!-- item -->
<div class="item">
<div class="title">
Css Masonry
<p class="french"><a href="https://quentinrenaux.com/category/oneexperimentperday" target="_blank">Check the article</a></p>
</div>
</div>
</div>
thanks a lot for your help, It's my second question here and sometime it's hard to explain.
