css) img 와 img를 감싼 button이 어긋날때 display: flex;

 

기존에 <button> 48*52 과 <img> 16*16가 약간 어긋났다.

 

 

 

 

---

 

 

display: flex;     추가 코드 수정후

<button> 48*48 과 <img> 16*16 크기가 딱 맞다

 [ html ] 

<button class="btn-toggle">

                    <img src="../assets/images/ico-arrow-gray.svg" alt="">

                  </button>

[ css ]

  .btn-toggle {

    //이미지와 이미지를 감싼태그가 미묘하게 어긋날때 display:flex; 주면 딱 맞는다.

    display: flex;

    // 내가준 패딩값 때문에 밀릴때 패딩값 만큼 마이너스 마진값을 주면 된다.

    margin: -16px;

    padding: 16px;

  }

 

 

 

 

 

 

 

 

---

padding:  16px 

 

주고나서 밀렸다.

 

 

패딩만큼  -마진 값을 주면 다시 자리를 찾는다.

margin: -16px