메뉴 건너뛰기

검색창 닫기

HEUKMYO

Html/css

Cross Browsing 인라인 코딩 사이에 개행으로인한 공백 없애기

흑묘 2017.02.08 17:46 read.472

HTML
  1. <ul>
  2. <li>Item 1</li>
  3. <li>Item 2</li>
  4. <li>Item 3</li>
  5. </ul>


감싸는 컨테이너의 font-size를 0으로 주고,

자식의 폰트사이즈를 지정해주면 인라인 또는 인라인 블럭 엘리먼트 사이의 공백이 제거된다.


CSS
  1. ul {
  2. font-size: 0;
  3. }
  4. li {
  5. display: inline-block;
  6. width: 100px;
  7. font-size: 30px;
  8. color: white;
  9. text-align: center;
  10. }
  12. li:nth-child(1) {
  13. background: #333;
  14. }
  15. li:nth-child(2) {
  16. background: #666;
  17. }
  18. li:nth-child(3) {
  19. background: #999;
  20. }
  21. body {
  22. margin: 16px;
  23. }


2. 태그 비틀기 & 주석삽입
  1. <ul>
  2. <li>
  3. one</li><li>
  4. two</li><li>
  5. three</li>
  6. </ul>


  1. <ul>
  2. <li>one</li
  3. ><li>two</li
  4. ><li>three</li>
  5. </ul>


<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>
추가메뉴 목록
위로