As can be seen in the example, in some places the shadows disappear from the blocks. How to avoid it? Margin does not help, increasing the distance between the columns, too.

.content-wrap { max-width: 1000px; margin: 0 auto; background: #fafafa; padding: 0 20px; -webkit-columns: 230px; -moz-columns: 230px; columns: 230px; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } article { height: 200px; width: 100%; display: inline-block; padding: 5px; background: #f9f9f9; box-shadow: 0 1px 2px rgba(0,0,0,0.6); margin: 5px; } article header { height: 30%; background: #a85; } article .content { height: 70%; background: #666; } 
 <div class="content-wrap"> <article> <header></header> <div class="content"></div> </article> <article> <header></header> <div class="content"></div> </article> <article> <header></header> <div class="content"></div> </article> <article> <header></header> <div class="content"></div> </article> <article> <header></header> <div class="content"></div> </article> <article> <header></header> <div class="content"></div> </article><article> <header></header> <div class="content"></div> </article> <article> <header></header> <div class="content"></div> </article> <article> <header></header> <div class="content"></div> </article> <article> <header></header> <div class="content"></div> </article> </div>

  • it does not disappear anywhere, all the rules, it's just that you have an offset downwards, so the shadow is lower at the bottom than at the top. - Jean-Claude
  • @ Jean-Claude what browser do you have? I clearly see in chrome, in some places there is no shadow, that on this example, what is live on the working site is malginovdesign
  • problem place article width 100% - Jean-Claude
  • add * {box-sizing: border-box; } and then the borders / indents will enter this width article 100% - Jean-Claude

1 answer 1

Problem place article { width: 100%}
Add * {box-sizing: border-box; } and then the borders / indents will be included in this width of the article 100%.

 * { box-sizing: border-box; } .content-wrap { max-width: 1000px; margin: 0 auto; background: #fafafa; padding: 0 20px; -webkit-columns: 230px; -moz-columns: 230px; columns: 230px; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } article { height: 200px; width: 100%; display: inline-block; padding: 5px; background: #f9f9f9; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); margin: 5px; } article header { height: 30%; background: #a85; } article .content { height: 70%; background: #666; } 
 <div class="content-wrap"> <article> <header></header> <div class="content"></div> </article> <article> <header></header> <div class="content"></div> </article> <article> <header></header> <div class="content"></div> </article> <article> <header></header> <div class="content"></div> </article> <article> <header></header> <div class="content"></div> </article> <article> <header></header> <div class="content"></div> </article> <article> <header></header> <div class="content"></div> </article> <article> <header></header> <div class="content"></div> </article> <article> <header></header> <div class="content"></div> </article> <article> <header></header> <div class="content"></div> </article> </div>