css) Display property (block, inline, inline-block)

https://www.w3schools.com/css/css_display_visibility.asp

CSS Layout - The display Property

 

모든 element들은 block이나 inline과 같은 default display property를 갖고있다.

 

• Block : Always starts a new line and takes full width
• Inline : Does not start and only take up as much as content space 

 

index.html

보면 <div> <h1> <p> 태그들은 자동적으로 줄바꿈이 적용되고 full width다. 따라서 이 태그들의 default property는 block인것을 알수 있다.

<span> <a> <img> 태그들은 줄바꿈이 적용되지 않고 content에 필요한 크기만큼만 적용되었으므로 default property가 inline인것을 알수 있다.

 

 

아래와 같이 display 를 임의로 바꿔줄수 있다. 

inline -> block

---

Block을 default property로 갖는 태그들:

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

inline을 default property로 갖는 태그들:

• <span>
• <a>
• <img>

---

Horizontal Centering

block element 중앙 정렬 

auto : 브라우저가 적절한 여백 크기를 선택. 예를 들어 요소를 중앙 정렬하고 싶을 때 사용.

margin의 top, down을 0, left,right을 auto 값을 줌으로서 중앙정렬됨.

 

 

---

• Block : Top Bottom margin,padding respected
• Inline : Top Bottom margin,padding not respected 

 

index.html

 

margin을 5px를 줬더니 <a> 태그의 링크가 서로를 침범한다.

이유는 <a> 의 default property는 inline이고 inline property는 margin과 padding의 top bottom을 보장하지 않기때문이다. (not respected) 

 

해결하기 위해서는 다음과 같이 property를 inline->block으로 변경해주면 된다.

이제 브라우저가 <a> 태그의 링크들의 padding의 top bottom을 respect 하고 있다.

 

---

아래의 경우도 보자

index.html

 

<a> 태그의 margin의 top bottom left right를 10px로 설정해줬는데 bottom right는 10px의 margin이 생긴 반면

top down은 그대로다.

아래와 같이 20px로 변경해도 left right는 변경되지만 top bottom은 그대로인것을 알수 있다.

이것 역시 <a> 태그의 default property가 inline이고, 브라우저는 inline의 top bottom maring을 무시하기 때문이다.

 

---

그렇다면 링크들을 한줄에 표시하고 싶다면 어떻게 해야할까? 

display : block 으로 block으로 변경해야할까?

block은 padding을 full width로 늘리고 개행하기 때문에 다음과 같은 결과가 나온다.

 

 

 

이럴때를 위해 inline-block 이라는 property가 있다.

• inline-block : inline property 속성을 유지하고 margin의 top,bottom이 respected 하고 싶을때 사용