div元素margin修改后无变化问题求助

你的问题核心是CSS选择器优先级冲突：.portfolio类选择器的优先级高于div元素选择器，所以你给div设置的margin:15px会被.portfolio类里的margin:10px覆盖，导致修改无效。如果开发者工具显示margin为0，大概率是你修改的低优先级div样式未生效，实际被其他更高优先级规则（比如误改代码或未展示的全局样式）覆盖了。

快速解决方法 #

直接修改.portfolio类的margin值，它的优先级足够高，修改后会直接生效：

.portfolio {
  height: 250px;
  width: 150px;
  margin: 15px; /* 将原10px改为15px */
}

其他可选方案 #

如果想通过div选择器控制margin，需要提升它的优先级：

• 使用更具体的选择器，比如div.portfolio：

div.portfolio {
  margin: 15px;
}

• （不推荐，仅应急使用）添加!important强制覆盖：

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

另外注意你的代码里.portfolioimg样式多了一个多余分号，建议删除避免潜在问题：

.portfolioimg {
  height: 60%;
  width: 90%; /* 移除之前多余的分号 */
}

内容的提问来源于stack exchange，提问作者wannabedev