скрыть пустые пространства ниже и выше блока

Question

, пожалуйста, посетите link

вы можете увидеть следующее изображение в ссылке:

есть много пустых пространств ниже и выше этого изображения. я хочу, чтобы удалить этот пробел и я хочу, чтобы отобразить как link2

.check_delivery .actions {float: left;width: 25%;} 
.check_delivery .f-right {margin-left: 0 !important;} 
.check_delivery .f-right, .right {float: left !important;} 
.check_delivery .button > span {background: #565656 none repeat scroll 0 0; width: 100% !important;} 
.check_delivery .button span {padding: 3px;text-transform: capitalize !important;} 
.check_delivery .item.last.odd { padding: 0;} 

.check_delivery .search {margin: 0 auto !important; width: 100%;} 

.check1 { 
    float: left; 
    text-align: center; 
    width: 90%; 
    font-size: 17px; 
} 

.ikon { 
    position: relative; 
    top:50px; 
} 

.check_delivery .block-subtitle { 
    display: inline-block; 
    float: left; 
    font-family: Museo,Helvetica,arial,san-serif; 
    font-size: 15px; 
    margin-top: 6px; 
    padding-left: 60px; 
    width: 27%; 
} 
.check_delivery #estimate_postcode { 

    float: left; 
    margin-bottom: 0 !important; 
    margin-left: 10px !important; 
    margin-right: 10px; 
    margin-top: 0 !important; 
    padding: 0 0 0 10px !important; 
    width: 70% !important; 

} 


.shipping-estimation-form { 

    float: left; 
    margin: 0 auto; 
    padding: 0; 
    width: 30%; 
} 

я попытался это:

.block block-shipping-estimate 
{ position : relative; bottom:70px; } 

, но я думаю, что его будет влиять на других частях страницы.

Может ли кто-нибудь помочь мне в правильном решении.

Answer 1

измените ниже CSS

.ikon { 
    float: left; 
    margin-top: 20px; 
    /*position: relative; 
    top: 50px;*/ 
} 

.block, .sidebar .box-reviews { 
    clear: both; 
    float: left; 
    margin: 0 0 10px; 
    padding: 10px 20px 20px; 
    position: relative; 
    width: 96%; 
} 

.short-description .std ul { margin: 0; } 

.check_delivery .block-subtitle { 
    display: inline-block; 
    float: left; 
    font-family: Museo,Helvetica,arial,san-serif; 
    font-size: 15px; 
    margin-top: 6px; 
    padding-left: 10px; 
    width: 26%; 
} 

.product-view .add-to-box { 
    margin-top: 0; 
    overflow: visible; 
    position: relative; 
} 

.div_link-cart .block-cart-top { 
    clear: none; 
    float: right; 
    margin: 0; 
    padding: 8px 0 0; 
    width: auto; 
} 

Answer 2

Сделайте следующее, чтобы удалить лишние пробелы снизу и сверху.

Удалить margin: 0 0 30px; padding: 10px 20px 20px; из .block, .sidebar .box-reviews и дать position: relative; ему.

Изменение ikon CSS, как:

.ikon { 
    position: absolute; 
    top: 20px; 
} 

И удалить <br> из .short-description и .std.

Answer 3

Почему не использовать те же DOM и CSS классы, как во второй ссылке?

<div class="block-content"> <div id="block_info"> 
    <img src="http://totaltoys.com/media/font-100.png" height="35" width="70"> 
    <strong><span>Check Delivery Availability</span></strong>  
    <input type="text" placeholder="Enter your PIN Code" class="input-text" maxlength="120" id="zipcode" size="20" name="zipcode" onkeypress="if (event.keyCode == 13) { return false;}"> 
    <button type="button" name="zip-check" title="Check" class="button1" id="zip-check"><span>CHECK</span></button> 
    <div id="delivery-message"></div> 
    <div id="delivery-html"></div> 
    </div> 
</div> 

Кроме того, мое предложение заключается в использовании директивы Угловые: directives

Это является отличным решением в таких случаях, что шаблон повторяется много раз в вашем коде.

Answer 4

Это должно сделать это, просто добавив отступы, как вам нужно!

#label{ 
 
    height: auto; 
 
    float: left; 
 
    
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    padding-left: 50px; 
 
    
 
    background-image: url("https://cdn2.iconfinder.com/data/icons/simple-microphone-icon/512/Location_Icon-128.png"); 
 
    background-position: left top; 
 
    background-size: 45px 40px; 
 
    background-repeat: no-repeat; 
 
} 
 
#check{ 
 
    height: 40px; 
 
    float: right; 
 
} 
 
#keyword-boxer{ 
 
    overflow: hidden; 
 
    padding: 0px 2.5px; 
 
} 
 
#keyword{ 
 
    width: 98.75%; 
 
    height: 36px; 
 
    
 
    border: 1px solid #c0c0c0; 
 
}

<div> 
 
    <label id="label">Check Availability</label> 
 
    <button id="check">Check</button> 
 
    
 
    <div id="keyword-boxer"><input type="text" id="keyword"/></div> 
 
</div>

Answer 5

Попробуйте

.block.block-shipping-estimate { 
     margin: 0; 
     padding: 0; 
     clear: both; 
     position:relative; 
    } 
    .ikon { 
     position: absolute; 
     top: 10px; 
    } 

Answer 6

Установите position: relative как для следующих классов, а затем установить

margin:0px !important; 
padding: 0px !important; 
width : 100%; 

Вот HTML код:

.block.block-shipping-estimate { 
    clear: both; 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 
.block, .sidebar .box-reviews { 
    clear: both; 
    float: left; 
    margin:0px !important; 
    padding: 0px !important; 
    position: relative; 
    width: 100%; 
}