display 속성에 사용하는값 : block, inline-block, inline

a태그를 보면 인라인요소를 갖고  있는걸 알 수 있는데

우리가 display를 사용해서 블럭요소로 변경할 수있다.

 a {
    color:black;
    text-decoration: none;
    border: 1px solid red;
   
   }

 

 

 

---

이렇게 display : block을 했을때 변경할 수 있는데 블럭요소  특징인 가로 100% 와

상하좌우 마진 50px을 주는것 그리고  세로배치까지 강제로 블럭요소로 지정할 수  있는것이다.

 

 

근데? 나는 세로배치가 아니라 가로배치로 하고싶다...

이렇게 말이다.

 

근데 diplay 를 block를 해제하면 가로배치는 되나 인라인요소 특성상 너비값이 지정이  안된다.

( 좌우도 마진은 되나 상하는 마진이 들어가지 않는다)

 

그래서 해줄 방법은?

a {
    color:black;
    text-decoration: none;
    border: 1px solid #ddd;
    display: inline-block;
    margin: 5px;
    text-align: center;
    width: 200px;
    border-radius: 5px;
    padding: 5px;
   }

display : inline-block 이부분만 보면되는데.

인라인의 특징인 가로배열과 블럭의 특징인 너비값 지정 을 같이 쓸수있는데  인라인블럭이다.