设置首页图像布局的样式-目标div还是img？

Question

I am styling a homepage using image content only, no text.

When I am styling the image layout, should this be done in the div class only (eg. ceiling> or do I need to style each img class (.ceiling > a > img)

Just consicious I am going to deep with the styling here, when it could just be set in the top level div.

http://jsfiddle.net/515r0zw4/

<div class="category4block">
<div class="ceiling"><a href="http://example.com/ceiling"><img  src="http://example.com/image/data/Home Page /Ceiling.jpg" /></a></div>
<div class="wall"><a href="http://example.com/wall"><img  src="http://example.com/image/data/Home Page /Wall.jpg" /></a></div>
<div class="island"><a href="http://example.com/island"><img  src="http://example.com/image/data/Home Page /Island.jpg" /></a></div>
<div class="downwall"><a href="http://example.com/downwall"><img   src="http://example.com/image/data/Home Page /Downwall.jpg" /></a></div>
</div>

.category4block {
width: 100%;
margin-left: -10px;
clear:both;
}

.ceiling {
float: left;
width: 23%;
margin-left: 5px;
margin-bottom: 20px;
}

.ceiling > a > img {
border-style: solid;
border-width: 10px;
max-height: 240px;
max-width: 100%;
width: 100%;
}

.wall {
float: left;
width: 23%;
margin-left: 22px;
margin-bottom: 20px;
}

.wall > a > img{
border-style: solid;
border-width: 10px;
max-height: 240px;
max-width: 100%;
width: 100%;
}

.island {
float: left;
width: 23%;
margin-left: 22px;
margin-bottom: 20px;
}

.island > a > img{
border-style: solid;
border-width: 10px;
max-height: 240px;
max-width: 100%;
width: 100%;
}

.downwall {
float: left;
width: 23%;
margin-left: 22px;
margin-bottom: 20px;
}

.downwall > a > img{
border-style: solid;
border-width: 10px;
max-height: 240px;
max-width: 100%;
width: 100%;
 }

Answer 1

You can just style the 'wrappers', ie: .ceiling, .wall, .island, .downwall

.ceiling{float: left; width: 23%; margin-left: 5px; margin-bottom: 20px;}

.wall, .island, .downwall{float: left; width: 23%; margin-left: 22px; margin-bottom: 20px;}

then you can give the images a particular class which will have the style, eg: image

<img class="image" src="YOUR_IMAGE_SOURCE" />
<img class="image" src="YOUR_IMAGE_SOURCE" />
<img class="image" src="YOUR_IMAGE_SOURCE" />
<img class="image" src="YOUR_IMAGE_SOURCE" />

.image{border-style: solid; border-width: 10px; max-height: 240px; width: 100%;}