css中img默认样式问题

html-css015

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

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

首先，如果考虑兼容性的情况下我不建议你用.topdiv1 img:nth-child(2n)这样的选择器，其次我来说明一下这个问题，你这个是没有明白生成块元素的意义，生成块元素后他的顶部就是他的父级div的顶部，而不是他本身的顶部，你可以看一下你这张图，在没有生成块元素的时候是不是以他原来的位置为起始位置再次margin:5px 0给了一个上下边距，也就是说上面的那个实际上是margin：25px 20px但是生成块元素后，她是把原来的margin:20px重置成了margin:5px 20px

再次回答：这就是生成块元素的和不生成块元素的区别，你还是没有仔细看我的回答，你再仔细看看，我说的挺清楚的吧。