Fille Fille - 7 months ago 8
HTML Question

Is there a easy way to move border-bottom further down?

Is there an easy way to just move the border down 5px? Like some trick would be great...

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


CSS

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

Answer

You could just add some padding to the bottom of your .item container via the padding-bottom property :

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

This can be seen below using the red line (as white was hard to see) :

enter image description here

Example

<!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>