Question

问题是我试图将siginimage的左边框设置为40px，但由于signinimage的高度为25px，因此边框高度也设置为{{ 1}}。

25px

Answer 1

两种方法。

创建容器并将图像放入其中

在你的问题中，你说你想把边框扩展到左边（但我的意思是，这只是一个简单的问题 float:，，但你可以申请一般来说这种方法

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

    #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;
    }

＆＃13;

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

＆＃13;

我个人更喜欢第一个选项，因为它更直观，通常被认为是应该如何处理容器（元素内部元素）的常见做法。

Answer 2

要获得比图像更高的边框，可以将图像包装在容器中，然后将边框应用于该容器。

＆＃13;

.top-header{
  float: left;
  border-left: 2px solid #CCCCCC;
  height: 40px;
  margin-top: 0px;

  /* Center the image vertically */
  display: flex;
  align-items: center;
}
 
#signinimage{
  height: 25px; 
  width: 25px;
  padding-left: 10px;
}

＆＃13;

<div class="top-header">
  <img src="http://placekitten.com/25/25" id="signinimage">
</div>

＆＃13;

有没有办法可以改变css的边框高度？

2 个答案: