HTML/CSSのイメージのサイズ/サイズが位置に基づいて「破損」

Question

HTML/CSSでコーディングしています。イメージ位置をabsoluteに設定すると、すべて正常に動作します。しかし問題は、一度それをrelativeに設定すると、その境界がすべて奇妙になるということです。ここではいくつかの例は以下のとおりです。

絶対 - CSS：

.dashboard-button { 
    position: absolute; 
    border: thin red solid; 
} 

絶対 - 画像： https://gyazo.com/43135c7c665aceb4cdb232f50887d446

相対 - CSS：

.dashboard-button { 
    position: relative; 
    border: thin red solid; 
} 

相対 - 画像： https://gyazo.com/661182fb53acfb6b732a70b3b00ca38a

ご覧のとおり、relativeとすると、画像の境界線が一様に平坦になります。私は画像の高さにheightを設定しようとしました。私はheightを100%に設定しようとしましたが、私は何か狂ったことを試みました。私はheightを500pxに設定し、それが何かをするかどうかを確認するだけです。それはしませんでした。私はここで何が間違っているのか分からないが、どんな答えも高く評価されている！ありがとう。

Answer 1

解決策が見つかりました...私がしなければならなかったのはdisplayをinline-blockに設定したことです。ここに私の新しいCSSのコードは次のとおりです。

.dashboard-button { 
    position: relative; 
    display: inline-block; 
    border: thin red solid; 
}