@ 마진병합 현상에 의해서 해당 <div> 마지막에 존재하는 <p> 의 margin-bottom 값이 <div>에 적용되어서 생기는 오류 입니다.

 

#마진병합 이란?

- 부모요소(div)에 padding, border 등의 값이 없을 경우, 자식요소(p)의 margin 값이 부모에 적용되는 현상

(인접한 요소간의 마진값을 계산하는 방법이 복잡하여 단순하게 설명드립니다.)

 

* 수정방법

<div> 에 overflow:hidden; 을 주시면 됩니다. (<ul> or <li> 에 적용해도 됩니다.)

overflow:hidden; 의 사용이 불가능 할 경우 자식요소(<p>)에 magin-bottom 값을 수정하시기 바랍니다.


<div class="sub11">
  ...
  <ul>
    ...
    <li>
      <p style="color:#595959">* 자세한 사항은 문의바랍니다.</p>
    </li>
  </ul>
</div>

태블릿 이상에서는 <ul> 이 absolute 처리되어서 margin 값이 부모에 영향을 주지 않습니다.