0

The margin of the div is already set to 15px. Even when I change it, nothing changes, When I go to inspect element the margins are now set to 0px but the div containers are fixed in their place.

div {
  display: inline-block;
  border: solid lightgrey;
  box-shadow: 0px 0px 7px lightgrey;
  border-radius: 5px;
  padding-left: 10px;
  padding-right: 10px;
  margin: 5px;
}

.portfolio {
  height: 250px;
  width: 150px;
  margin: 10px;
}

.portfolioimg {
  height: 60%;
  ;
  width: 90%;
}

.title {
  font-weight: bold;
  font-family: arial;
  margin: 5px;
}

.description {
  margin: 5px;
  font-family: arial;
  font-size: 14px;
}

button {
  margin: 5px;
  padding: 5px;
  color: white;
  background-color: #4267B2;
  border: none;
  border-radius: 3px;
}
<div class="portfolio">
  <img class="portfolioimg" src="https://static5.depositphotos.com/1000270/486/i/600/depositphotos_4869272-stock-photo-bengal-cat-light-brown-cream.jpg">
  <p class="title">Oliver</p>
  <p class="description">2 mutual friends</p>
  <button>Add friend</button>
</div>
<div class="portfolio">
  <img class="portfolioimg" src="https://static5.depositphotos.com/1000270/486/i/600/depositphotos_4869272-stock-photo-bengal-cat-light-brown-cream.jpg">
  <p class="title">Oliver</p>
  <p class="description">2 mutual friends</p>
  <button>Add friend</button>
</div>
<div class="portfolio">
  <img class="portfolioimg" src="https://static5.depositphotos.com/1000270/486/i/600/depositphotos_4869272-stock-photo-bengal-cat-light-brown-cream.jpg">
  <p class="title">Oliver</p>
  <p class="description">2 mutual friends</p>
  <button>Add friend</button>
</div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
wannabedev
  • 32
  • 8
  • Probably a duplicate of [How to remove the space between inline/inline-block elements?](https://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-inline-block-elements) – CBroe Sep 20 '22 at 13:36
  • I've checked, but it is unclear what 'div' you're talking about. The div with `.portfolio` has a margin of 10px, which is exactly what you set it to. So what's going wrong? – Kay Angevare Sep 20 '22 at 13:57
  • You rarely should apply styles to an entire element type, such as 'div'. It's just not wise. – isherwood Sep 20 '22 at 14:09
  • Refrain from using static height/width elements, play with min-height/width and max-height/width for a better responsive experience – FUZIION Sep 20 '22 at 14:11

1 Answers1

1

The problem happens because you style the same div twice. div and portfolio are the same actually. so the margin in the portfolio overwrites the margin in div. and that's why nothing happens when you change it in div.

so it's better to always use the class when you style because your div style like this will apply to any div you add to the page.

* {
  border: 1px solid red;
}

div {
  display:inline-block;
  border:solid lightgrey;
  box-shadow:0px 0px 7px lightgrey;
  border-radius: 5px;
  padding-left:10px;
  padding-right:10px;
  margin:50px;
}
  
.portfolio{
  height:250px;
width: 150px;
/* margin:50px; */
}
.portfolioimg{
  height: 60%;;
width:90%;
}
.title{
  font-weight:bold;
font-family:arial;
margin:5px;
}
.description{
  margin:5px;
  font-family:arial;
font-size:14px;
}
button{
  margin:5px;
padding:5px;
color:white;
  background-color:#4267B2;
border:none;
border-radius:3px;
}
  <div class="portfolio">
    <img class="portfolioimg" src="https://static5.depositphotos.com/1000270/486/i/600/depositphotos_4869272-stock-photo-bengal-cat-light-brown-cream.jpg">
    <p class="title">Oliver</p>
    <p class="description">2 mutual friends</p>
    <button>Add friend</button>
</div>
<div class="portfolio">
    <img class="portfolioimg" src="https://static5.depositphotos.com/1000270/486/i/600/depositphotos_4869272-stock-photo-bengal-cat-light-brown-cream.jpg">
    <p class="title">Oliver</p>
    <p class="description">2 mutual friends</p>
    <button>Add friend</button>
</div>
<div class="portfolio">
    <img class="portfolioimg" src="https://static5.depositphotos.com/1000270/486/i/600/depositphotos_4869272-stock-photo-bengal-cat-light-brown-cream.jpg">
    <p class="title">Oliver</p>
    <p class="description">2 mutual friends</p>
    <button>Add friend</button>
</div>
Mad7Dragon
  • 1,237
  • 1
  • 10
  • 21