html 작업시 이미지파일(img) 공백 제거, 없애기 방법 (인라인요소, 블럭요소의 정의)

html 작업시 이미지파일(img) 공백 제거, 없애기 방법 

인라인요소, 블럭요소의 정의

 

 

HTML 작업을 하다보면 이미지 밑에 여백이 생기는 경우가 있다.

이 경우 img 이미지파일 요소를 감싸게 되면 아래 padding 값이 적용되기 때문이다.

 

img(이미지파일)의 요소는 인라인요소(inline) 이다.

텍스트또한 인라인요소(inline) 인데, 그렇다면 이미지와 텍스트 파일 모두 인라인요소(inline)인것을 알 수 있다.

인라인요소(inline) 특성상 width, height 값을 지정하여도 먹히지 않으며, 요소 안의 내용의 길이 만큼 영역을 차지하게 된다. 

 

 

 

• 인라인요소, 블럭요소의 정의와 그 차이점은?

인라인요소(inline)란?

인라인 요소는 블록요소와 달리 줄바꿈 성질이 없다. 그렇기 때문에 블록요소 처럼 행이 바뀌지 않고 한줄로 출력된다. 인라인 요소는 블럭요소를 포함 할수 없다. 

 

 

블록(block)요소란? 

블록요소는 마크업 시 줄바꿈이 일어 난다. 인라인과 달리 블록 요소 안에는 텍스트(문자)를 포함할 수 있다.

 

인라인요소(inline)	블록(block)요소
a, b, br, button, code, em, img, input, label, map, object, select, span, strong, sub, sup, textarea, var	aside, address, div, dl, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, ol, p, section, table, ul, video

 

 

---

 

그렇다면html작성시 이미지여백(img)을 제거 할 수 있는 방법은?

 

1. inline 요소를  block 요소로 변경.

inline인 이미지 요소를  block 요소로 전환한다.

이미지 요소에 block를 적용한다면 여백이 생기지 않는 것을 확인 할 수 있다. 하지만 블럭 요소가 적용되지 않는 레이아웃에서는 사용 할 수 없다는 단점이 있다.

 

<style>
div {
width:100%;
height: auto;
}
img {
display: block;
}
</style>

 

 

2. vertical-align의 기본값을 변경

vertical-align의 기본은 baselilne 이다.

이 속성값을 가장 상단 or 하단으로 붙여 준다.

 

 

vertical-align 속성값 정리

속성값	설명
baseline	기본값으로 텍스트가있을경우 하단의 꼬리부분을 뺀 기준선이다. 여러줄의 텍스트가 있을때 하단 가장 긴 꼬리부분을 뺀 기준선이다.
middle	인라인요소의 수직 중앙지점.
text-top	인라인요소의 상단, 부모콘텐츠 영역의 상단에 정렬된다.
text-bottom	인라인요소의 하단, 부모콘텐츠 영역의 하단에 정렬
top	인라인 요소의 상단 가작 바깥쪽 상단에 정렬
bottom	인라인 요소의 상단 가작 바깥쪽 하단에 정렬
sub	부모박스의 아래첨자의 적절한 위치로 내림 (font-size 영향 X)
super	부모박스의 윗첨자 위치로 올림 (font-size 영향 X)

 

 

이미지를 가장 상단, 하단으로 붙여야 

여백없이 붙일 수 있기 때문에

아래와 같은 속성값을 적용해 주면 된다. 

 

상단으로 붙이기 vertical-align: top;

하단으로 붙이기 vertical- align: bottom;

 

<style>
div {
width:100%;
height: auto;
}
img {
vertical-align: bottom;
}
</style>