CSS에서는 "font-size" 속성을 사용하여 버튼 사이의 간격을 제거할 수 있습니다. 버튼 사이의 간격은 요소 노드에 텍스트 노드가 있어서 코드를 들여쓰기할 때 너비를 차지하기만 하면 됩니다. 버튼 요소의 상위 요소에 "font-size:0;" 스타일을 추가하여 간격을 제거하세요.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS에서 버튼 사이의 간격을 제거하는 방법
일반적으로 버튼을 설정한 후에는 버튼 사이에 간격이 생깁니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <button>按钮</button> <button>按钮</button> <button>按钮</button> </body> </html>
출력 결과:
이때 버튼 요소의 상위 요소를 설정하고 해당 상위 요소에 "font-size:0;" 스타일을 추가해야 합니다.
예제는 다음과 같습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body{ font-size:0; } </style> </head> <body> <button>按钮</button> <button>按钮</button> <button>按钮</button> </body> </html>
출력 결과:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ font-size:0; width:200px; height:100px; border:1px solid red; } </style> </head> <body> <div> <button>按钮</button> <button>按钮</button> <button>按钮</button> </div> </body> </html>
출력 결과:
(학습 영상 공유: css 영상 튜토리얼)
위 내용은 CSS에서 버튼 사이의 공백을 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!