• 카테고리

    질문 & 답변

  • 세부 분야

    자격증 (디자인)

  • 해결 여부

    미해결

자식요소가 인라인블럭일때 아래 틈 없애는 방법 알려주세요

21.05.30 16:37 작성 조회수 251

1

<body>

<div class="parent">

<span class="child"></span>

</div>

</body>

---------------------------------------

.parent {

    border: 5px solid red;

    width: 600px;

    overflow: hidden; 

    text-align: center;

}

.child {

    background-color: gold;

    width: 200px;

    height: 200px;

    display: inline-block;

}

일때 자식이 중앙정렬은 되는데 자식요소와 보더 사이에 틈이 있는데

이거 없애는 방법 있을거 같은데 안되네요

도와주세요 ㅠ

course-thumbnail

[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

13. CSS로 HTML 가로 배치하기(float, overflow, clear, inline-block)

강의실 바로가기

답변 1

답변을 작성해보세요.

0

코딩웍스(Coding Works)님의 프로필

코딩웍스(Coding Works)

지식공유자

2021.05.30

아래코드 보시면 인라인 블록일 때는 가로배치를 쉽게 하는 대신에 오른쪽과 아래에 4픽셀 정동의 폰트 관련 마진이 생깁니다. 만약 정확하게 하고 싶으면 인라인블록이 아니라 float를 사용하세요.

그런데 오른쪽과 아래를 정교하게 맞춰야 하는 경우가 아니면 크게 신경 쓸 필요없습니다.

아래 코드처럼 마진을 마이너스 값으로 줘서 강제로 마진을 없애시는 방법이 있습니다.

참고로 웹디자인 기능사 시험보실 때 레이아웃은 꼭 float로 잡으세요.

  <!DOCTYPE html>
  <html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .parent {
        border: 5px solid red;
        width: 600px;
        /* overflow: hidden; */
        text-align: center;
      }

      .child {
        background-color: gold;
        width: 200px;
        height: 200px;
        display: inline-block;
        margin-bottom: -4px;
      }
    </style>
  </head>

  <body>

    <div class="parent">
      <span class="child"></span>
      <!-- <span class="child"></span> -->
    </div>

  </body>

  </html>

이 글과 비슷한 Q&A