html - How to spacing between images without any space with their container -


i'm trying create div images inside it, , there space between them. example, want space between them 2px, can use margin:1px; become 2px when one's left-margin meet other's right-margin, same top , bottom. there space between image , div's border, div become this:

+------------------------------------------+ |                                          | |  +---------------+    +---------------+  | |  |               |    |               |  | |  |               |    |               |  | |  |               |    |               |  | |  |      img1     |    |      img2     |  | |  |               |    |               |  | |  |               |    |               |  | |  |               |    |               |  | |  +---------------+    +---------------+  | |           div                            | |                                          | |  +---------------+    +---------------+  | |  |               |    |               |  | |  |               |    |               |  | |  |      img3     |    |      img4     |  | |  |               |    |               |  | |  |               |    |               |  | |  |               |    |               |  | |  +---------------+    +---------------+  | |                                          | +------------------------------------------+ 

when i'm trying do, this:

+---------------+---+---------------+ |               |   |               | |               |   |               | |               |   |               | |      img1     |   |      img2     | |               |   |               | |               |   |               | |               |   |               | +---------------+   +---------------+ |        div                        | |                                   | +---------------+   +---------------+ |               |   |               | |               |   |               | |      img3     |   |      img4     | |               |   |               | |               |   |               | |               |   |               | +---------------+---+---------------+ 

how this, without set style every single image?

if adding classes or ids not option , not want style images individually. try using img:nth-child(n) or img:nth-of-type(n).

first assign right margin every odd image:

img:nth-of-type(odd){     margin-right: 1px; } 

then left margin every even:

img:nth-of-type(even){     margin-left: 1px; } 

and top margin every image first two:

img:nth-of-type(n+3){     margin-top: 2px; } 

you leave out 1 of left or right margins , increase 1 leave in... thereby reducing size of styles little.

here example: jsfiddle. in example container div has set width of 2 images plus margins, , images floating left within.


Comments

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -