控制元素 html 和 css 的尺寸

Question

我有一个标题元素，里面有 2 个元素 - 一个 img 和 p 元素。

我希望标题高度是它包含的图像的确切高度，这样当我删除边距并填充它“适合”时。

不是将标题元素的高度调整为与图像相同的像素高度，有没有办法“自动”做到这一点？

我尝试过 height:auto 但这只会带来意想不到的不稳定结果。

代码如下：

<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

试试下面的 -

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

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

通过该方法，将图片设为块元素并手动设置其高度，会导致父块元素调整其大小。但是，如果该标头中的任何其他块元素的高度大于 img 元素，则它将导致标头采用该其他元素的高度，但绝对位置的块元素除外。

希望这会有所帮助。

Answer 2

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

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