HTML에는 인라인 블록 요소라는 또 다른 유형의 요소가 있습니다. HTML 콘텐츠의 흐름을 깨지 않고 정의된 요소에 의해 호출되는 각각의 태그가 차지하고 경계를 이루는 공간일 뿐입니다. 블록 수준 요소 기능은 주로
기본 구문은 다음과 같습니다.
구문:
<html> <body> <p><span> ---some html codes ---</span> </p> </body> </html>
위 코드는 HTML에서 인라인 블록 요소를 작성하기 위한 기본 구문입니다. 아래에서는 사전 정의된 인라인 블록 요소의 일부 세트를 사용했습니다.
위 태그는 주로 html의 사용자 요구 사항을 기반으로 사전 정의된 html 인라인 요소입니다. 우리는 html 인라인 블록 요소의 태그. 우리 모두는 블록 수준 요소가 항상 새 줄을 시작하고 주어진 변수에 대해 전체 너비를 차지한다는 것을 알고 있지만 인라인 요소는 새 줄을 시작하지 않습니다. 또한 블록 수준 요소에 비해 너비가 적게 소요되지만 html 인라인 요소에서는 너비를 선언해야 합니다. 인라인 요소는 단락 요소 내부에 선언됩니다. <스팬> 요소는 종종 컨테이너에서 일부 텍스트로 사용되며 특정 필수 속성이 없지만 지정된 CSS 스타일, 클래스 및 ID는 요소는 텍스트의 일부 스타일 부분에서 CSS와 함께 사용됩니다.
코드:
<html>
<head>
section {
background: green;
box-sizing: border-box;
padding: 150px;
}
div {
box-sizing: border-box;
display: inline-block;
height: 100px;
padding: 54px;
text-align: center;
width: 53%;
}
.green {
background: lightgreen;
}
.black {
background: black;
}
</head>
<body>
<span style="border: 2px lightgreen">
</span>
<section>
<div class="green">Width: 40%</div>
<div class="black">Width: 60%</div>
</section>
</body>
</html>위 코드 설명: 위 코드에서는 두 개의 div 태그에 대한 너비를 설정했습니다. 각각은 50%가 되며 표시 속성은 인라인 블록이 됩니다. 두 div 태그의 너비가 50%이므로 예상되는 출력은 다양하므로 태그 값은 51% 또는 49%로 변경됩니다. 그러나 이는 좋은 습관이 아니며 HTML 요소 공간에 충분하지도 않습니다. 인라인 요소는 HTML의 두 div 태그 사이의 단어 간격을 따르기 때문에 최소한 50%가 필요합니다.
We can also use some borders and padding styles in the HTML div tags; it will highlight the web pages more effectively. We use
We will discuss the below examples.
Code:
<html> <body> <p>Sample <span style="border:3px green">Welcome</span>To my domain</p> <p>Welcome to My Domain</p> </body> </html>
Output:
Code:
<html>
<head>
<style>
span.first {
display: inline;
width: 150px;
height: 120px;
padding: 8px;
border: 3px blue;
background-color: green;
}
span.second {
display: inline-block;
width: 140px;
height: 110px;
padding: 7px;
border: 3px blue;
background-color: green;
}
span.third {
display: block;
width: 103px;
height: 110px;
padding: 6px;
border: 2px yellow;
background-color: black;
}
</style>
</head>
<body>
<div> Welcome to My Domain
<span class="first">Welcome</span>
<div>
<div> Same Same
<span class="second">Same Same</span>
<div>
<div> Welcome to My Domain
<span class="third">Welcome</span>
<div>
</body>
</html>Output:
Code:
<html>
<head>
<style>
.first {
float:center;
display: inline;
width: 150px;
height: 120px;
padding: 8px;
border: 3px blue;
background-color: green;
}
.1{
clear:center;
}
</style>
</head>
<body>
<div class="first"> <marquee> Welcome to My Domain</marquee>
</div>
</body>
</html>Output:
Explanation of the above code: The first example will discuss the essential inline element called tag that will use for the web page; the second example will use span in the CSS style, and the same will be called in the tag in body sections each of the CSS styles will be defined in each span third example we will use some text values in the box-limit areas in the inline-block element features.
In Conclusion, partly based on the above topics, we have some ideas about inline-block elements in Html. We use both tag elements for their dependencies and features in user areas. However, IE and other browser versions may or may not support some tags.
위 내용은 HTML 인라인 블록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
