为何单独用div包裹元素并设置CSS样式无法生效？

你的代码本身语法和逻辑都没问题，样式没生效肯定是忽略了CSS工作机制里的几个基础细节，给你列几个必查点：

• CSS文件未正确关联HTML
  得确保HTML里有正确的样式引入：

  • 若是外部CSS文件，必须在<head>标签里加<link rel="stylesheet" href="你的css文件路径.css">；
  • 若是内嵌样式，要把CSS代码放在<style>标签里，且位置在<head>或者目标元素之前。
    路径错误或者没加引入，浏览器根本读不到你的样式。

• 样式被更高优先级规则覆盖
  打开浏览器F12开发者工具，选中.main、.image这些元素，查看「样式」面板里你的自定义规则是否被划掉。如果是，说明有行内样式（比如<div style="margin-top:0">）、ID选择器（比如#main { margin-top:0 }）或者带!important的规则抢占了优先级。

• 浏览器默认样式的影响
  很多浏览器会给body默认加8px左右的margin，要是没重置全局样式，.main的margin-top:100px会和body的margin叠加，看起来没生效。可以先加个简单的全局重置：

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  

  另外，img默认是inline元素，虽然你给.image设了display:block，但img本身可能有默认间距，给img加width:100%就能继承.image的300px宽度：

  .image img {
    width: 100%;
  }
  

• 元素渲染的隐性问题
  比如google.png路径错误，导致.image容器高度为0，看起来样式没生效；或者input有默认的min-width限制，给input加width:100%就能让它占满.inputbox的400px宽度。

最后，开发者工具是排查CSS问题的核心——查看「布局」面板能直观看到元素的盒模型、外边距、尺寸，比盲目试错高效多了。

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