CSS에서 블록을 간격 없이 만드는 방법
- 藏色散人원래의
- 2021-03-22 16:09:541720검색
CSS 블록 간격을 구현하는 방법: 먼저 HTML 샘플 파일을 만든 다음 인라인 요소 범위를 인라인 블록 요소로 정의하고 마지막으로 태그 사이의 공백을 제거합니다.
이 글의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터
최근 모바일 페이지를 만들 때 레이아웃에 인라인 블록 요소를 자주 사용하는데 필연적으로 문제가 발생합니다. 인라인 블록 요소 사이의 간격입니다. 이러한 간격은 일부 레이아웃 문제를 일으키므로 간격을 제거해야 합니다. 다음은 인라인 블록 요소와 간격 제거 방법에 대한 간략한 요약입니다.
참고: HTML에서 div, p, hx, form, ul, li, dl 및 dd는 블록 수준 요소입니다.
인라인 블록이란 무엇인가요?
inline-block은 인라인 블록으로, CSS 요소 분류에서 인라인 요소 또는 인라인 요소, 블록 수준 요소, 인라인 블록 요소의 세 가지 유형으로 나눌 수 있습니다.
인라인 블록 요소에는 인라인 요소와 블록 수준 요소의 특성이 있습니다. (1) 요소는 가로로 배열될 수 있습니다. (2) 너비, 높이, 패딩과 같은 다양한 속성을 설정하는 블록 수준 요소로 사용할 수 있습니다. 기다리다.
예제 1: 인라인 요소 범위를 인라인 블록 요소로 정의
<!DOCTYPE html >
<html>
<head>
<style type="text/css">
div{
background: red;
display:inline-block;
}
</style>
</head>
<body>
<div>这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
</body>
</html>효과는 다음과 같습니다.
인라인 블록을 제거하면 div 간격이 발생합니다.
1 태그 사이의 공백을 제거합니다.
요소 사이에 공백이 생기는 이유는 요소 태그 사이의 공백 때문입니다. 공백을 제거하면 공백이 자연스럽게 사라집니다.
<!DOCTYPE html >
<html>
<head>
<style type="text/css">
div{
background: red;
display:inline-block;
}
</style>
</head>
<body>
<div>这是一个div</div><div>这是一个div</div><div>这是一个div</div>
</body>
</html>효과는 다음과 같습니다.
2. 모든 div를 동일한 div에 넣습니다.
<!DOCTYPE html >
<html>
<head>
<style type="text/css">
div{
background: red;
display:inline-block;
}
</style>
</head>
<body>
<div>
<div>这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
</div>
</body>
</html>효과는 다음과 같습니다.
3.
이 방법은 이미지만 포함된 div에 적합합니다
[권장 학습: css 비디오 튜토리얼]
위 내용은 CSS에서 블록을 간격 없이 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!