Brydon McCluskey Brydon McCluskey - 6 months ago 24
HTML Question

Border Extends past Image?

I have just started getting into CSS/HTML again (about an hour ago) and have ran into an issue. I am trying to make these display as an inline style, although, the border seems to extend far past the image which in turn is not allowing them to display as I would like.

Thanks for the help!

Here is my JSfiddle: https://jsfiddle.net/pghfekj6/

HTML

<div class="gallery">
<figure class="gallery-item">
<img width="50%" height="50%" src="http://66.media.tumblr.com/7a79ee78891996bee770ce47c1f70397/tumblr_o6ajskjBmD1uinem1o1_1280.jpg">
</figure>

<figure class="gallery-item">
<img width="50%" height="50%" src="http://67.media.tumblr.com/830d7bf137d8ccac31897d45d985a531/tumblr_o2zapjWK2F1tb4uw5o7_500.jpg">
</figure>
</div>


CSS

body {
font-family: 'Lato', sans-serif;
font-weight: 100;
color: lightgrey;
}

h1 {
margin: 20px;
}

.gallery {
display: inline;
}

.gallery-item {
margin: 20px;
border: 5px solid red;
}

Answer

You haven't applied the border to the images but to their container (figure) which is a block-level element by default. That is, it spans the width of the page.

.gallery-item img {
    border: 5px solid red;
}