margin is set to 15px i change it but nothing changes it is fixed on 15px

wannabedev 0
Viewed 40

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>

css html
1 Answers

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>

Willpower-70
Related