html - 在 CSS 中更改边框高度？

Question

我试图将 siginimage 的左边框设置为 40px，但是由于 signinimage 的高度是 25px，因此边框高度也被设置为 25px.

.top-header {
    float: left;
    border-left: 2px solid #CCCCCC;
    height: 30px;
    margin-top: 0px;
}

#signinimage {
    padding-top: 6px;
    padding-left: 10px;
    height: 25px; 
    width: 25px;
}

<img src="images/signinimage.png" class="top-header" id="signinimage">

Answer 1

两种方法。

1. 要么创建一个容器并将图像放入其中

In your question, you said you wanted to extend the border to the left (but I mean that's just a matter of simple float:, but you can apply this approach in general

img {
  width: 100px;
  height: 100px;
  float: right;
}

#container {
  border: 3px solid black;
  width: 150px;
  height: 100px;
}

<div id ="container">
    <img src=https://i.imgur.com/QIsNrpM.png/>
</div>

1. 另一种选择，如果您坚持只使用一个元素而不是两个元素，您可以将图像设置为不同大小的 div 的 background-image >

    #imganddiv {
      border: 3px solid black;
      width: 150px;
      height: 100px;
      
      background-image: url('https://i.imgur.com/QIsNrpM.png');
      background-size: 100px 100px;
      background-repeat: no-repeat;
      background-position: right center;
    }

<div id="imganddiv"></div>

我个人更喜欢第一个选项，因为它更直观一些，而且通常被认为是处理容器(元素内的元素)的常见做法。