进一步向下移动边界底部？

时间：2016-04-22 20:40:02

标签： html css

有一种简单的方法可以将边框向下移动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>

2 个答案:

答案 0 :(得分：6)

您可以通过padding-bottom属性在.item容器的底部添加一些填充：

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

下面可以看到使用红线（白色很难看到）：

enter image description here

示例

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

是padding-bottom属性。

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

Fiddle

相关问题
最新问题