텍스트 인라인 이미지가 이미지 상단으로 오르면 패딩 위쪽이 작동하지 않습니까?

Question

좋아요. 내 사이트의 헤더에 작은 로고 이미지가있는 경우 머리글을 통해 두 개의 링크가 있어야합니다.

두 개의 링크가 포함되어 있지만 공백을 없애기 위해 작동하지만 맨 위에 올랐다가 낮추는 방법을 알 수 없습니까?

<div class="row"> 
    <div class="header"> 
    <img src="assets/caliweb.png" alt="CALi Logo"> 
     </div> 
     <p><a href="#">Patents Pending</a></p> 
     <p><a href="#">Partner with Us</a></p> 
    </div> 

CSS는

이 나는 ​​것을 전혀 작동하지, 뭘하려

.header p { 
    display: inline; 
    padding-top: 5%; 
    padding-left: 10%; 
    padding-right: 10%; 

} 

.header img{ 
    float: left; 
    padding-top: 
    padding-left: 5%; 
    padding-right: 10%; 
    display: inline; 


} 

, 링크는 이미지 아래에 있습니다.

<div class="row"> 
     <div class="header"> 
     <div class="headerlogo"> 
     <img src="assets/caliweb.png" alt="CALi Logo"> 
      </div> 
      <div class="headertext"> 
      <p><a href="#">Patents Pending</a></p> 
      <p><a href="#">Partner with Us</a></p> 
     </div> 
    </div> 
     </div> 

CSS

.header { 
display:inline; 
} 

.headertext { 
    display: inline; 
    padding-top: 5%; 
    padding-left: 10%; 
    padding-right: 10%; 

} 

.headerlogo{ 
    float: left; 
    padding-top: 
    padding-left: 5%; 
    padding-right: 10%; 
    display: inline; 


} 

내가 무지/순진한 실수를 유지하지만, 너희들이 날을 해결 도움에 매우 도움이되었습니다. 나는 그것을 매우 감사한다.

EDIT 최근 문제가 발견되었습니다. 코드를 다시 타이프하는 동안, 나는 실수로 .header 태그에서 텍스트를 닫았습니다. 다 잘 됐네, 고마워. 패딩 인라인 요소의 모든 측면에 적용 할 수 있지만

인라인 요소 및 패딩

을 ... 또는 인라인 블록; {블록 디스플레이}

Answer 1

당신은 당신의 .headertext을해야 왼쪽 및 오른쪽 패딩 만 주변 콘텐츠에 영향을 미칩니다.

인라인 요소 마진 좌우 모서리가 수행되는 동안

는 콘텐츠 상하 아니다.

Answer 2

정말로 HTML 구조를 고수하려면 display : inline 대신 display : inline-block을 사용하십시오.

"nav"및 "ul"태그로 링크를 감싸는 것이 좋습니다. 그런 다음 .header를 부순 다음 nav 및 li을 왼쪽으로 이동하고 마진 상단을 nav에 추가합니다.