將border-bottom進一步向下移動？

是否有簡單的方法將邊框向下移動5px？像一些技巧將是巨大的......將border-bottom進一步向下移動？

h2{ 
 
    display: inline-block; 
 
    } 
 
    .video{ 
 
    vertical-align: middle; 
 
    } 
 
    .item{ 
 
     border-bottom: 1px solid green; 
 
    }

 <div class="item"> 
 
    <iframe class="video" width="200" height="100" src="//www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe> 
 
    <h2>title</h2> 
 
    </div>

來源

2016-04-22 Unknown Potato

這裏有一個小提琴：https://jsfiddle.net/n5tseg3k/ –

你可以只通過padding-bottom屬性添加一些填充到您的.item容器的底部：

.item{ 
    padding-bottom: 5px; 
    border-bottom: 1px solid white; 
}

由此可以看出下面用紅線（如白是很難看）：

例

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <style> 
 
    h2 { 
 
     display: inline-block; 
 
    } 
 
    .video { 
 
     vertical-align: middle; 
 
    } 
 
    .item { 
 
     padding-bottom: 5px; 
 
     border-bottom: 1px solid red; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="item"> 
 
    <iframe class="video" width="200" height="100" src="//www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe> 
 
    <h2>title</h2> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-04-22 20:42:39

啊謝謝，正是我期待的！ –

是與padding-bottom財產。

.item{ 
    border-bottom: 1px solid red; 
    padding-bottom: 5px; 
}

Fiddle

來源

2016-04-22 20:42:23

謝謝藏漢正是我找了！ –

不客氣:) –

將border-bottom進一步向下移動？

回答

相關問題