Reputation: 50
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;
}
Upvotes: 0
Views: 801
Reputation: 499
I hope my answers is enough for you :)
if you want to make border in your image you can you img element on css just i change that selector to but img element
Old selector .gallery-item
New selector .gallery-item img
body {
font-family: 'Lato', sans-serif;
font-weight: 100;
color: lightgrey;
}
h1 {
margin: 20px;
}
.gallery {
display: inline;
}
.gallery-item img {
margin: 20px;
border: 5px solid red;
}
<header>
<title>web gallery.</title>
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,100,700,900' rel='stylesheet' type='text/css'>
</header>
<body>
<div class="container">
<header>
<h1>
web gallery.
</h1>
</header>
<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>
<figure class="gallery-item">
<img width="50%" height="50%" src="http://66.media.tumblr.com/809db161738e0255821af747f0be1873/tumblr_o7pkyjVO0s1tsrhx6o1_1280.jpg">
</figure>
<figure class="gallery-item">
<img width="50%" height="50%" src="http://66.media.tumblr.com/8b528e2542564533b0c21d4a23568928/tumblr_o6mh4gKIFA1up0523o2_1280.jpg">
</figure>
<figure class="gallery-item">
<img width="50%" height="50%" src="http://67.media.tumblr.com/ce934191c63533db7fb398a5766c1778/tumblr_o6mh4gKIFA1up0523o1_1280.jpg">
</figure>
<figure class="gallery-item">
<img width="50%" height="50%" src="http://66.media.tumblr.com/39cbc0c8de8e947eac27d97b628fa065/tumblr_o7bwagld1r1ss9jvwo1_540.jpg">
</figure>
<figure class="gallery-item">
<img width="50%" height="50%" src="http://66.media.tumblr.com/986dc5a68d05dc66588de5b4016aa7d6/tumblr_o6mh4gKIFA1up0523o3_1280.jpg">
</figure>
<figure class="gallery-item">
<img width="50%" height="50%" src="http://66.media.tumblr.com/ca8860045cbe96aec9598a69be76b459/tumblr_o6mh4gKIFA1up0523o5_1280.png">
</figure>
</div>
</div>
</body>
Upvotes: 0
Reputation: 19367
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;
}
Upvotes: 1