Menu
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>
453
You can do it with line-height: css rule. set line-height: 18px; and that will do this trick.
CSS borders are placed between the margins and padding of an HTML element. If you want the borders of an HTML element to extend past the width (or height) of that element, you can add CSS padding to the element in order to push the borders outward.
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) :
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>Yes with padding-bottom property.
.item{
border-bottom: 1px solid red;
padding-bottom: 5px;
}
Fiddle
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
