CSS控制图片位置技巧

在CSS中，可利用margin和padding属性调节图片位置。前者控制元素外部间距，后者调整内部填充，通过具体示例可清晰掌握其用法。

1、 创建一个名为test.html的文件，用于演示CSS控制图片位置的方法。

2、 在test.html中，利用div标签创建一个模块，为其设置class属性为imgdiv，便于后续通过该类名定义相应的CSS样式，实现结构与样式的分离与控制。

3、 在test.html的div标签中，通过img标签插入图片，图片路径为images/2.jpg。

4、 在test.html文件中添加标签，所有页面的CSS样式代码都将写入该标签内部，实现内嵌样式定义。

5、 在CSS中，为类名imgdiv设置样式，指定div的宽度和高度均为400px，并添加灰色边框。

6、 在CSS样式中，通过margin属性定义图片与外部元素的距离，如设定图片距div顶部边界20像素；利用padding属性设定图片内容与自身边框的间距，例如将图片左侧内边距设为20像素，以控制内部空白区域。

7、 用浏览器打开test.html，查看图片定位设置后的显示效果。

8、 新建一个名为test.html的文件。

9、 在文件中新建一个div模块，并在其中用img标签插入一张图片。

10、 在CSS中设定div的宽度和高度以定义其尺寸样式。

11、 通过CSS的margin和padding属性，可调整图片在div容器内的位置和间距。