이미지 밑에 패딩을 제거 할 수 없습니다.

필자는 기본적으로 이미지를 이온 배너에 추가하려고하는데 그 아래에 자동으로 추가되는 성가신 패딩이 있습니다. 제거 할 수없는 부분이 있습니다. . 코드는 다음과 같습니다이미지 밑에 패딩을 제거 할 수 없습니다.

<ion-view> 
    <ion-content> 
    <img src="http://impact.byu.edu/style/wide_banner6.gif" style="width:100%; padding:0px"> 
    <div class="list"> 
     <div class="item item-divider"> 
     Settings 
     </div> 
    </div> 
    </ion-content> 
</ion-view>

이 codepen 내가 약 https://codepen.io/anon/pen/LkvObV을 이야기하고있는 것을 보여줍니다. 이미지 하단과 "설정"항목 구분선 사이의 간격을 제거하고 싶습니다. 누구나 어떻게 알아? 나는 패딩/마진 속성을 사용하여 CSS 성공에 시도했다.

출처

2016-08-19 user6689604

img 태그에 display: block;을 적용하고 Magic!

설명 : 기본적으로

는 이미지가 텍스트처럼, 인라인 렌더링됩니다. 모든 인라인 블록 요소에는 기본적으로 세로 맞춤 값이 있습니다. vertical-align: top을 적용하거나 display: block

출처

2016-08-19 18:03:08 kukkuz

을 적용하여 재설정하십시오. 놀랍도록 간단했습니다. 상황을 어떻게 디버깅했는지 조금 설명해 주시겠습니까? 나는 몇 시간 동안 콘솔에서 사냥을 시도했지만 아무 것도 찾을 수 없었다 ... – user6689604

대답에 대한 설명 추가 :) 당신은 너무 허용/up 응답을 mark 수 있습니까? 감사! – kukkuz

나는 몇 분 동안 대답을 받아 들일 수는 없지만 바로 그 후에 올 것이다. 또한 codepen을 다시 보았을 때 https://codepen.io/anon/pen/LkvObV를 업데이트하고 배너 바로 아래에 버튼을 추가하여 다른 작은 CSS 문제에 대해 물었습니다. 내가 제거 할 수없는 패딩의 작은 조각, 제거하는 방법에 대한 조언? – user6689604

이미지 밑에 패딩을 제거 할 수 없습니다.

답변

관련 문제