HTML/CSS: Border around all images

I have this: http://jsbin.com/oqari5/edit

How can I have a border around all the image开发者_如何转开发s? With this I mean all images are inside 1 border. I tried, but it gets bigger than it should, why is this?

---

Welcome to the wacky world of CSS, where there is rarely a logical solution for simple problems. In this case there are a couple reasons why your border ain't tight.

First is simple, you are explicitly setting the width of div.friendsbox with an inline style. Remove that.

Now if you just do that, the containing div that you want a border on will simply stretch to fill the entire width that is available. Here is where it gets tricky, to get the div to only be as wide as its contents (assuming page width > div contents) you must set it to float. So...

div.items div {
  float: left;
  border: solid 1px red; 
}

At this point you'll have a nice red border around your images, however you'd notice that the border extends below the images a small amount. The problem here is, well I think at least, that img elements are inline by default, which means they are treated like text, which means that extra padding is automatically added by the browser in somewhat unpredictable and not easily controlable ways. So the best solution I came up with was to also float each img element:

div.items img {
  float: left;
}

Done? Of course not...you see there's one more issue. That box with the grey border is now collapsed, apparently ignorant of all those boxing guys inside of it. This is a CSS quirk, and can be fixed with a trailing element that has a clear style set:

span.clear {
  clear: both;
  display: block;
}

And in your markup you'd need to add

<span class="clear"></span>

after the closing tag for the div containing the pictures.

Here: http://jsbin.com/oqari5/10/edit

If anyone has a more elegant solution, please please post it. All this just reminds me of why I sometimes hate CSS.

---

A little CSS will do the job!

<style type="text/css">

img{
border: 1px solid red;
}

</style>

Here's an example on JS Bin

Hope it helped!

---

One border tightly fitting around a series of images (or other inline content)

<div style="border: 1px solid red; float: left">
    <img src="....." />
    <img src="....." />
</div>

Of course you can (and should!) put this style inside separate style sheet (css file). This is for demo only.

A div is a block element and wants to be 100% of it's parent's (inner)width. By making the div float left, you can prevent it from occupying the full width of the parent, making it fit tightly around its content.

You should apply the border and the float to the most inner div you have around your images. If you don't, the div inside the styled div will cause the bordered div to be 100% wide again.

[edit] Removed display: inline. float: left works better in the code provided by the OP.

---

<style type="text/css">img {border: 1px solid #000;}</style>

That should do it.

---

You've got way too many <div> tags than you need, and it's better practice to use CSS classes, instead of inline styles.

Wrap all your images in one div, <div class="items">, and then set the style for the "items" class in your head:

<style>
    div.items img {
        border: solid 1px red;
    }
</style>

The reason the border is stretching to fill the page is that you've got:

<div style="border: 1px solid rgb(102, 102, 102);">

Which only defines a border, not a width, so the div "naturally" expands to fill it's container.

Read up on CSS: It's not hard to learn, and it saves you time. You don't need all those inline styles.