Question

我有一个包含2个元素的标题元素 - 一个img和p元素。

我希望标题高度是它所包含图像的精确高度，这样当我删除边距并填充它时，＃34;适合＆＃34;。

不是将标题元素的高度调整为与图像相同的像素高度，而是通过＆＃34; auto＆＃34;做这个？

我试过身高：自动，但这只会带来意想不到的好结果。

以下是代码：

<header>
  <img src="images/logosketch.jpg" alt="companylogo" />
  <div class="search">
    <p>SEARCH HERE</p>
  </div>
</header>

header { position: relative; }
.search { bottom: 0; position: absolute; right: 0; }
.search p { margin: 0; }

任何指针？

Answer 1

从容器中移除填充并从图像中移除边距。有些浏览器在常用元素上有自己的样式。这就是为什么许多人使用CSS Reset stylesheet。

但是，如果p元素变大，容器也会变大，因此您必须以某种方式限制该元素（确保文本不会使其高于图像或指定高度为与容器相同。

Answer 2

尝试以下方法 -

header { position: relative; padding: 0; margin: 0;}

header img {
    display: block;
    height: 100px;
}

使用此方法，使图像成为块元素并手动设置其高度，它将使父块元素调整其大小。但是，如果该标头中的任何其他块元素的高度大于img元素的高度，那么它将使标头占据其他元素的高度，但绝对位置的块元素除外。

希望这有帮助。

控制元素html和css的维度

2 个答案: