删除图像下方的空白区域

Question

我们可以在图片下方link看到很多空白区域。我想隐藏那些空白的空间。

.main {
    margin: 0 auto;
    width: 1000px;
}

body, button, input, select, table, textarea {
    font-family: 'Roboto Condensed', sans-serif;
    color: #636363;
    font-size: 14px;
    line-height: 1.5;
}

HTML

<div class="custom_case">
    <div class="custom_case_left">
        <h1 class="cc1">Custom Cases</h1>
        <h2 class="cc2">Make Your Own design</h2>
    </div>

<?php


$brandSelect = '<select id="brand_select">';
$brandSelect .= '<option value="">My Brand</option>';

$brandSelect .= '</select>';


echo '<select id="model_select"><option value="">My Model</option></select>';
?>


<div class ="cc3">
<div class ="cc4">
<a href= "><span class ="cc5"> See Cases > </span> </a>
</div>

</div>

我不想在图像和页脚之间留下这么多空白空间

请帮助我。

提前致谢。

Answer 1

尝试制作img：

• line-height: 0;
• vertical-align：顶部或底部;

Answer 2

您必须修复主容器的高度。

enter code here.main-container{

高度：550px; }

Answer 3

对private：

进行此更改

classes

在图片中移除位置.col1-layout .col-main { position: relative; } .custom_case_right { float: left; position: absolute; top: 0; bottom: 0; right: 0; } ，请改为添加此样式：

absolute

Answer 4

为你想出来！

手机外壳的图像是造成空间问题的原因。

.custom_case_right img {
   /*float:right;*/
   /*bottom:320px;*/
}

这将修复图像下方的间距。现在你的图像显示不正确并修复了这个

.custom_case_right {
    float:right;
    margin-top:-310px;
}

这两个变化应该为你照顾它。我在Chrome中对此进行了测试。

你仍然需要考虑如何让你的图像在视口缩小时表现出来。