框上的空間太多 - HTML

-1

但上方和下方的空間太多。

見的形象在這裏：

我如何刪除的頂部和底部之間多餘行距：
1.Title和日期
2.按鈕和文本
3.按鈕和下面的額外間距

這裏是我的HTML：

<div class="col-1-3"><img src="http://www.iliveaccountable.com/wp-content/uploads/2016/11/iliveaccountable.jpg" alt="" /> 
<h3 style="font-family: 'Montserrat'; text-align: center;">TAKING IT TO THE SOURCE</h3> 
<h4 style="font-family: 'Montserrat'; text-align: center;">11/13/2016</h4> 
<a href="http://www.iliveaccountable.com/oldsite/iliveconnected-patterns/" target="_blank"> 
<button class="btn btn-block btn-primary">Watch Video</button> 
</a> 
</div>

這裏是我的CSS：

h4 { 
    text-align: center; 
} 
.col-1-3 { 
    padding: 10px; 
    width: 28%; 
    float: left; 
margin: 1%; 
border: 1px solid #dedede; 
-webkit-border-radius: 7px; 
-moz-border-radius: 7px; 
border-radius: 7px; 
} 
.col-1-3 img { 
    width: 100%; 
} 

.btn-block{ 
    display: block; 
    width: 100%; 
} 
@media only screen and (max-width: 767px) { 
    .col-1-3 {width: 44%;} 

} 
@media only screen and (max-width: 590px) { 
    .col-1-3 {width: 94%;} 

}

我只是想有足夠的空間，但這個空間是太多了。

來源

2016-11-16 Gaara Itachi Uchiha

使用[DOM檢查器]（https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#The_Inspector_DOM_explorer_and_CSS_editor）可以幫助追蹤這樣的問題。大多數現代瀏覽器都包含一個。 – showdev

什麼適合你...請考慮接受答案，如果它有任何幫助 – Geeky

製作margin和padding 0 div.col-1-3

檢查中的所有元素這個網頁摘要

h4 { 
 
    text-align: center; 
 
} 
 
.col-1-3 * { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.col-1-3 { 
 
    width: 28%; 
 
    float: left; 
 
    margin: 1%; 
 
    border: 1px solid #dedede; 
 
    -webkit-border-radius: 7px; 
 
    -moz-border-radius: 7px; 
 
    border-radius: 7px; 
 
} 
 
.col-1-3 img { 
 
    width: 100%; 
 
} 
 
a { 
 
    margin: 0; 
 
} 
 
h3 { 
 
    margin: 0; 
 
} 
 
h4 { 
 
    margin: 0; 
 
} 
 
.btn-block { 
 
    display: block; 
 
    width: 100%; 
 
} 
 
@media only screen and (max-width: 767px) { 
 
    .col-1-3 { 
 
    width: 44%; 
 
    } 
 
} 
 
@media only screen and (max-width: 590px) { 
 
    .col-1-3 { 
 
    width: 94%; 
 
    } 
 
}

<div class="col-1-3"> 
 
    <img src="http://www.iliveaccountable.com/wp-content/uploads/2016/11/iliveaccountable.jpg" alt=""> 
 
    <h3 style="font-family: 'Montserrat'; text-align: center;">TAKING IT TO THE SOURCE</h3> 
 
    <h4 style="font-family: 'Montserrat'; text-align: center;">11/13/2016</h4> 
 
    <p> 
 
    <a href="http://www.iliveaccountable.com/oldsite/iliveconnected-patterns/" target="_blank"> 
 
     <button class="btn btn-block btn-primary">Watch Video</button> 
 
    </a> 
 
    </p> 
 
</div>

希望它可以幫助

來源

2016-11-16 22:49:32 Geeky

你可以在這裏檢查並檢查元素：http://www.iliveaccountable.com/weekly-coaching-videos/你的答案不起作用。 –

底部有空間。 –

在col-1-3上定義了一些填充，如果你不想要它，請將其刪除......我剛纔說padding-bottom爲0，這樣底部就沒有空間了......如果你不想要任何空間脫掉整個填充 – Geeky

創建額外的CSS有關h3，h4和btn-block的規則，其中您定義了s請致電margin-top和margin-bottom。從所有值開始，值爲0，並增加值，直到您對結果滿意爲止。評論後

此外：

1）你有圖像之間的空p標籤h3 2）您對所有p標籤與20像素的底邊（上線278 CSS規則「style.css」）

來源

2016-11-16 22:54:07 Johannes

你可以在這裏查看並檢查元素：http://www.iliveaccountable.com/weekly-coaching-videos/你的答案不起作用。 –

立即檢查。我已經刪除登錄。 –

看到我的回答除外 – Johannes

框上的空間太多 - HTML

回答

相關問題