CODEWITHSUNDEEP
htmlcss
Brydon McCluskey
Brydon McCluskey

Reputation: 50

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;
}

Upvotes: 0

Views: 801

Answers (2)

ZgrKARALAR
ZgrKARALAR

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

Andy G
Andy G

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

Related Questions