I have 3 divs with the same problem:

Several pixels lower than end of element, but higher than border. How can I fix that?

I've already tried zero paddings - no result.

Here's some code. Actually, styles almost same, only content is different.

<!DOCTYPE html>
<html>
<head>
<style>

#photo {
  position: absolute;
  z-index: 3;
  top: 20%;
  left: 20%;
  border: 5px;
  border-color: #ff6998;
  border-style: solid;
}
#video {
  position: absolute;
  z-index: 5;
  top: 40%;
  left: 40%;
  border: 5px;
  border-color: #ff6998;
  border-style: solid;
}
#text {
  position: absolute;
  z-index: 9;
  top: 10%;
  left: 20%;
  border: 5px;
  border-color: #ff6998;
  border-style: solid;
}

</style>
</head>
<body>

<div id="photo">
  <div id="photoheader">Фото</div>
  <a onClick="pickimg();">
  <img src="" id="randimg">
  </a>
</div>

<div id="video">
  <div id="videoheader">Видео</div>
  <iframe id="randvideo" width="640" height="360" frameBorder="0" src="" allowfullscreen></iframe>
</div>

<div id="text">
  <div id="textheader">Текст</div>
  <textarea class="scrollabletextbox" id="randnote" onClick="picknote();"></textarea>
</div>

</body>
</html>

0 Answers