在 CSS 中，对于图片的布局需要我们特别留意。经常我们可以看到图片在使用时会出现一些默认的空白，这会影响到页面的美观和布局。那么这些空白是怎样产生的呢？
首先，CSS 中的图片默认是行内元素（inline），和文字类似，占用的空间大小即为图片实际尺寸。如果图片的高度比行高小，那么图片会在垂直方向自动居中对齐。
但是，在图片标签的开始标签与结束标签中，会有一些空格、回车或者 Tab 键等字符产生，这就会导致图片后面出现一定的空白。此时我们可以使用 font-size: 0; 或者 word-spacing: -1em; 这样的设置来消除这些空白。
如果图片使用背景图（background-image）的方式来展示，那么同样也可能会存在空白问题。这是因为 background-image 本身属于行内元素，同样存在行高的问题。此时可以使用 background-size: cover; 或者 background-position: center center; 这样的设置来解决。
另外，还可以使用 vertical-align: middle; 来调整图片和文本的垂直对齐方式。
下面是一些常用的 CSS 代码解决图片默认空白的问题：
```
img {
display: block; /* 将图片转换为块级元素，避免受行高影响 */
font-size: 0; /* 设置字体大小为 0，消除默认空白 */
max-width: 100%; /* 图片宽度最大为父元素宽度 */
height: auto; /* 高度随宽度自适应 */
vertical-align: middle; /* 垂直居中对齐 */
}
div {
background-image: url(example.jpg);
background-size: cover; /* 背景图充满整个元素 */
background-position: center center; /* 水平和垂直方向居中 */
}
```
总之，针对图片默认出现空白的问题，在 CSS 中有多种解决方法。我们需要根据不同的情况进行选择，以达到美观和合适的布局效果。