2017-12-13 35 views
0

2 개의 헤드 라인을 서로 옆에 놓고 HTML이 자동으로 빈 공간을 추가하는 이유를 모르겠습니다.
빨간색 화살표의 공간이 사라지길 바란다.헤더 사이의 줄 간격을 줄입니까?

This is what it looks like now and the arrows indicate what I want to move together

HTML

<body> 
     <h1>Der Gecko<h1>     
     <h2>(lat. Gekko gecko)<h2> 
    <body> 

CSS

h1 {  
    opacity: 0.5; 
    background-color: #9B26AF; 
    color: #50ffffff; 
    font-size: 175; 
} 

H2 {  
    opacity: 0.5; 
    background-color: #68EFAD; 
    color: black; 
    font-size: 50;  
} 

답변

0

한번에 두 클래스에

margin: 0;  

를 추가.

h1 { 
 
margin: 0; 
 
border-width: 0; 
 
opacity: 0.5; 
 
background-color: #9B26AF; 
 
color: #50ffffff; 
 
font-size: 175; 
 
} 
 
h2 { 
 
margin: 0; 
 
opacity: 0.5; 
 
background-color: #68EFAD; 
 
color: black; 
 
font-size: 50; 
 
}
<body> 
 
    <h1>Der Gecko<h1>    
 
    <h2>(lat. Gekko gecko)<h2> 
 
<body>

+0

에 그 스타일의 디스플레이를 변경해야합니다 당신의 approch을 달성하기 위해, 그것은 국경 widh'없이 작동 : 0;' – ThisIsCodeMaster

+0

국경 폭 않고 업데이트 : 0; – Scath

0

당신의 패딩과 마진 값은 무엇인가? 표제 소자 block로 표시 CSS 0으로

+0

HTML/CSS 마크 업과 코딩에 익숙하지 않아서 렌더링 된 HTML에 영향을 미치는 CSS가 더 많이 있다는 것을 설명하는 것처럼 사용자가 좀 더 많은 컨텍스트를 대답에 추가하십시오. – ronnyfm

0

으로 사용해 . 당신이 실제로 display:inline;

h1{ 
    opacity: 0.5; 
    background-color: #9B26AF; 
    color: #50ffffff; 
    font-size: 175; 
    display:inline; 
} 

h2{ 
    opacity: 0.5; 
    background-color: #68EFAD; 
    color: black; 
    font-size: 50; 
    display:inline; 
}