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으로 설정 한 것입니다. 난 그냥 고정 헤이, 단지`display`에`인라인 block`을 추가 할 필요 @ovokuro,

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