CODEWITHSUNDEEP
htmlcss
Furious Mountain
Furious Mountain

Reputation: 1543

Move border-bottom further down?

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

   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>

Upvotes: 8

Views: 16228

Answers (2)

Rion Williams
Rion Williams

Reputation: 76607

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>

Upvotes: 15

Nutshell
Nutshell

Reputation: 8537

Yes with padding-bottom property.

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

Fiddle

Upvotes: 2

Related Questions