로고와 그 아래 요소 사이의 공간 축소

Question

그래서이 강의실 웹 사이트를 구축 중이며 교수님은 내 웹 사이트의 왼쪽 상단에 로고를 배치해야한다고 제안했습니다. 일부는 로고를 배치하는 데 친절하게 도움을 주었지만 로고 밑과 영웅 배너 바로 위에있는 공간이 너무 커서 CSS로 패딩을 사용하여 공간을 줄이려고했지만 작동하지 않았습니다.

이 현재 헤더에 대한 코드입니다 :

<header role="banner" id="home" class="site-header"> 
<div class="container container--max"> 
    <h1 class="site-header__title"> 
    <a href="#home"><img src="images/logo2.png"></a> 
    </h1> <!-- end .site-header__title --> 

그리고 이것은 내 웹 사이트입니다 : http://gabrielr.sgedu.site/final-project 모든 팁/도움이 필요하십니까?

eg.site-header__title { padding: 5px 0 0 0; } 

을 또는 당신은 .site-header class의 높이를 설정할 수 있습니다

Answer 1

당신은 .site-header__title의 최고 패딩을 추가 할 수 있습니다.

Answer 2

귀하의 로고는 일반적으로 위쪽 및 아래쪽 여백 공간이있는 h1 요소에 중첩되어 있습니다.

당신은 h1에 여백을 조정하여 영웅 이미지에서 로고의 거리를 제어 할 수 있습니다. 이와

시작 :

header > .container > h1 { margin: 0; } 

이 좋아 보인다 :

header > .container > h1 { margin: .5em 0; }  

Answer 3

설정에 필요한 마진 아래 클래스에

.site-header__title 
{ 
    margin:10px; 
} 

Answer 4

답변 위입니다 이미 좋은, 그래서 그냥 참조 용으로 ...

Firefox 또는 Chrome을 사용하는 경우 F12 키를 눌러 개발자 콘솔을 열 수 있습니다. 거기서부터 CSS로 포맷팅을하고 편집자로 가서 변경하고 업로드하기 전에 CSS의 변경 사항을 알아내는 것은 쉬운 일입니다.

에서와 같이 여백과 패딩의 간격이 오는 컨테이너 상자의 모양을 쉽게 볼 수 있습니다. 또한 브라우저에서 다른 값을 테스트하여 편집기와 FTP에 커밋하기 전에 어떻게 보이는지 확인하십시오.

이 프로세스는 디스플레이 버그 및 레이아웃 문제를 해결하는 데 훨씬 빠릅니다.

유용하다는 것을 알았고 Javascript/jQuery에 들어가기 시작하면 Ajax를 디버깅하는 Firebug 플러그인을 고려하십시오. 브라우저에서 모든 일반적인 CSS 조작을 수행 할 수도 있습니다.

작업 흐름을 시도해보십시오. 나는 개인적으로 그것을 훨씬 빨리 발견한다. 행운을 빕니다!

Answer 5

.site_header에 height을 추가하면 로고 및 위의 동영상 아래에 공백이 줄어 듭니다.

.site-header { 
    height:85px; 
    background: #29272C; 
}