HTML에서 그림 사이의 간격을 조정하는 방법

HTML에서는 margin-left 또는 margin-right 속성을 사용하여 이미지 사이의 간격을 조정할 수 있습니다. 이 두 속성은 각각 요소의 왼쪽 및 오른쪽 여백을 설정할 수 있습니다. "margin-left: 값"만 추가하면 됩니다. 이미지 요소 img; " 또는 "margin-right: value;" 스타일이면 충분합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

html에서 그림 사이의 간격을 조정하세요

새 html 파일을 만들고 test.html 파일에 이름을 test.html로 지정하고 div를 만들고 클래스 속성을 dd로 설정하세요.

div에서 img 태그를 사용하여 사진 이름은 각각 1.jpg와 3.jpg입니다.

눈에 띄는 효과를 보여주기 위해 div의 스타일을 지정합니다. div 너비를 600px, 높이를 500px로 설정하고 중앙에 배치한 다음 1px 회색 테두리를 설정합니다.

test.html 파일에서 여백 속성을 사용하여 두 이미지 사이의 거리를 설정합니다. 예를 들어, 이미지 1.jpg와 이미지 3.jpg 사이의 거리를 30px로 설정하려면 margin-right 속성을 사용하여 설정하면 됩니다.

또한 여백을 사용하여 이미지의 위쪽, 아래쪽, 왼쪽 여백을 설정할 수도 있습니다.

• margin-left: 왼쪽 여백

• margin-top: 위쪽 여백

• margin-bottom: 아래쪽 여백.

예를 들어 margin-left를 사용하여 3.jpg 이미지의 왼쪽 여백을 30px로 설정하면 이전 단계의 효과를 얻을 수도 있습니다.

margin은 "위, 오른쪽, 아래, 왼쪽" 순서로 사진의 네 면에 동시에 여백을 설정할 수도 있습니다. 예를 들어 "위, 오른쪽"의 여백을 설정할 수 있습니다. , 하단, 왼쪽" 그림 1.jpg의 크기를 10px, 20px, 30px, 40px로 늘립니다.

추천 튜토리얼: "html 비디오 튜토리얼"

위 내용은 HTML에서 그림 사이의 간격을 조정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!