如何判断该使用padding或margin、id或class、div或语义化

padding或margin

1. 二者角色定位不同：padding在内容和边框之间添加空白以便于阅读，margin在元素间添加空白，使页面布局更加清晰
2. padding可以被填充背景色或背景图，margin无此效果 

class或id

1. 在充当选择符时，class和id的区别在于优先级；id的特别作用：关联label和input（for id）、页面定位（a href）
2. 因此，id可用于实现行为与样式分离，专为写js服务

div或语义化标签 

HTML5新增的语义化标签（如，main、section、header、nav、article、aside、footer等）

1. 主要用于标识网页的逻辑分区，让浏览器更好的渲染元素
2. 有助于seo识别网页内容

div也能够实现逻辑区分，但它是一种通用的元素，不具备特定角色