웹 페이지의 각 섹션에 대한 버튼을 최대화, 최소화 및 닫기

Question

나는 프론트 엔드에 새로운 경험이 있습니다. 나는 그것을 탐구하고 그것을 정말로 사랑하고있다.

여기 제가 만난 몇 가지 문제가 있습니다. 꽤 간단 할 수도 있습니다.

내 웹 페이지의 오른쪽에 3 개의 섹션이 있습니다. 각 섹션을 최대화하고 최소화하고 닫는 기능을 추가하고 싶습니다. jquery SlideUp() 및 slideDown() 메서드를 사용하여 구현하는 데 성공했습니다.

나는 다음과 같은 버튼을 데 : 내 웹 페이지에서

<h2 id = "Heading" style="background-color: grey ;">Movie Names  
<button id = "minimise" > - </button> 
<button id = "maximise" > + </button> 
<button id = "close" > x </button> 
</h2> 

내가이 버튼 사이의 간격을 참조하십시오. 이 공간을 없애는 방법을 모르겠습니다. 창을 최대화하고, 최소화하고, 닫기 버튼을 보는 방법과 같은 것을보고 싶습니다.

더 많은 질문이 있습니다.이 버튼의 위치를 ​​조정하고 싶기 때문에 영화 이름과 버튼 사이에 공백을 어떻게 추가 할 수 있습니까? 때문에 줄 바꿈으로 인한 공백을

감사

Answer 1

그것은 가능성을. button 요소는 인라인이므로 옆에 나타나는 공백도 인라인으로 표시됩니다.

이 차이가 있는지 확인 :

<h2 id="Heading" style="background-color:grey;">Movie Names 
    <button id="minimise">-</button 
    ><button id="maximise">+</button 
    ><button id="close">x</button 
></h2> 

편집 : 여기 JSfiddle의 차이를 볼 수 있습니다. Your code 대 my code. 두 번째 예제에서는 버튼 요소 사이에 공백이 없습니다. 그러나 CSS를 통해 제어 할 수있는 여백, 윤곽선 등으로 인해 공백이있는 것으로 보일 수 있습니다.