有没有简单的方法可以将边框向下移动 5px？就像一些技巧会很棒......
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>最佳答案
您可以通过 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>关于html - 将边界底部进一步向下移动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36802976/