css中img默认样式问题

html-css015

css中img默认样式问题,第1张

img默认是个行内元素，比如在img的前面或后面放一些文字，这些文字会与图片排在同一行。因此，当图片的前后存在一些空格或回车换行符时，它们会与图片一起成为同一块行内元素，从而会造成外面的div被撑得比你想象的尺寸要大一些，比如：<div><img src="..."/></div>而如果是这样就不会：<div><img src="..."/></div>如果给img的css添加display:block属性，它就会变成块级元素（它会独占一行），其前后的空格、回车等也会被自动忽略，这样外面的div的尺寸就会保持与img一致。

操作步骤如下：

1、确定Dreamweaver，ctrl+n新建html文档；

2、利用插入菜单图像命令，插入多张图片，如下图，可看到各图片大小不一：

3、设计视图空白区域右击，点击css样式菜单下新建命令；

4、选择标签为img，点击仅对该文档；

5、弹出对话框可对各属性进行统一设置，例如点击方框，宽、高都输入100，点击确定；

6、效果如下图：