图片样式被设定为 block 后有什么效果

在 CSS 中，display 属性用于控制元素的显示方式。

如果将图片的 display 设定为 block，则图片会成为一个独立的块级元素，占据一整行，并且可以设定宽度、高度、内边距和外边距等样式。

例如，下面是一个将图片设定为块级元素的示例代码：

img {
  display: block;
  width: 300px;
  height: 200px;
  margin: 10px;
}

在上面的代码中，图片将会成为一个独立的块级元素，占据一整行，宽度为 300px，高度为 200px，并且有 10px 的外边距。

如果不将图片设定为块级元素，则图片会作为内联元素显示，即和文本一样在同一行显示。

例如，下面是一个将图片设定为内联元素的示例代码：

img {
  display: inline;
}

在上面的代码中，图片将会作为内联元素显示，即和文本一样在同一行显示。

通常情况下，图片会被默认设定为内联元素，即不设定 display 属性时，图片会作为内联元素显示。

但是，如果图片包含在一个块级元素中，则图片会继承该块级元素的 display 属性，如果该块级元素的 display 属性设定为 block，则图片也会被设定为块级元素。

例如，下面是一个将图片设定为块级元素的示例代码：

<div style="display: block;">
  <img src="image.jpg">
</div>

在上面的代码中，图片将会被设定为块级元素，占据一整行。

总之，将图片设定为块级元素可以轻松控制图片的宽度、高度和其他样式，但是需要注意图片可能会占据一整行，影响页面布局。