Computer >> 컴퓨터 >  >> 프로그램 작성 >> CSS

CSS에서 줄 높이 설정

<시간/>

선의 높이는 CSS line-height 속성으로 정의할 수 있습니다. 양수 값만 허용합니다.

구문

CSS line-height 속성의 구문은 다음과 같습니다 -

Selector {
   line-height: /*value*/
}

예시

다음 예는 CSS line-height 속성을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<style>
div * {
   margin: 1.5em;
   box-shadow: -13px -10px 10px 1px crimson;
}
#demo {
   line-height: 60%;
}
p {
   box-shadow: 13px -10px 10px 1px grey;
   line-height: 50px;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>
<p>This is demo text one.</p>
<div>This is demo text two.</div>
<div id="demo">This is demo text three.</div>
</div>
</body>
</html>

출력

이것은 다음과 같은 출력을 제공합니다 -

CSS에서 줄 높이 설정

예시

<!DOCTYPE html>
<html>
<head>
<style>
div * {
   margin: auto;
   padding: 3em;
}
p {
   height: 100px;
   width: 100px;
   border: thin solid;
   border-radius: 50%;
   box-shadow: 0 20px 10px 1px grey;
   line-height: 0.6;
}
</style>
</head>
<body>
<h2>What is C#?</h2>
<div>
<p>C# is a strongly-typed language. Every variable and constant has a type, as does every expression that evaluates to a value.</p>
</div>
</body>
</html>

출력

이것은 다음과 같은 출력을 제공합니다-

CSS에서 줄 높이 설정