html/css How to aling all pictures with same spaces.

Question

I want to make same spacing between all pictures. Their width would be the same only height differs. It should look like in the picture. example: http://prntscr.com/2ugt3z

Answer 1

do you mean something like, this will place margin of 5px on every image tag inside #content:

#content img{
 margin: 5px;
}

or make:

.image-margin{
margin: 5px;
}

and do something like:

or: http://isotope.metafizzy.co/

Answer 2

That kind of layout cannot be done using only floats, your options are:

• Use Flex layout (ie10+)
• Position each element manually
• Use a plugin, if you are using jquery then Isotope (http://isotope.metafizzy.co/) or Masonry (http://masonry.desandro.com/) are what you need, if you're using pure javascript, Salvattore (http://salvattore.com/) will do the trick.