전체 웹 페이지의 줄 간격

-1

내 웹 페이지의 줄 사이에 공간이 더 필요합니다. 나는 시도하고 더 많은 공간을 만들기 위해 CSS에서 "행 높이"를 적용하려고했지만, 나는 그것이 작동하지 않습니다 실현 :전체 웹 페이지의 줄 간격

https://gyazo.com/63c28f6ce59b8a5e17cf3d9835effa9e

나는 DIV, P의 내부 텍스트의 조각이 그림에 또는 범위. 텍스트가 너무 길면 최종적으로 여러 줄로 끝납니다. 이런 일이 생기면 줄 사이에 더 많은 공간이 있어야합니다.

어떻게하면됩니까?

2017-01-04 Vanquiza

그냥 줄을 추가'라인 height' 속성 당신' body' 태그? 그게 어쩌면 당신이 그것을 덮어 쓰는 CSS 프레임 워크 나 써드 파티 CSS 파일을 사용하지 않는다면. 그러나 코드가 없으면 우리는 정말로 당신을 도울 수 없습니다. – Paul

과 같은 질문에 대해서는 jsfiddle.net과 같은 공공 서비스에서 문제/코드 스 니펫을 재현하고 여기에 게시하면 시도한 내용과 개선 할 수있는 방법에 대한 더 나은 아이디어를 얻을 수 있습니다. –

정확하게 CSS 속성 인 line-height을 사용하면됩니다. 당신이 당신의 전체 웹 사이트에서 동일한 line-height를 원한다면

, 당신은 단순히 다음처럼 body 요소에 적용 할 수 있습니다 :

// applies to all <p> elements 
p { 
    line-height: 1.3em; 
} 

// applies only to elements with the .my_paragraph class 
.my_paragraph { 
    line-height: 20px; 
}

body { 
    line-height: 1.5; // a numerical value, or 
    line-height: 25px; // a pixel value, for example 
}

또한 특정 태그 나 클래스를 대상으로 수 사용할 수있는 값에 대한 자세한 내용과 line-height의 동작은 the MDN specification page에 있습니다. http://www.w3schools.com/cssref/pr_dim_line-height.asp에서

출처

2017-01-04 09:42:22

는 다음과 같은 예를

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p.small { 
    line-height: 70%; 
} 

p.big { 
    line-height: 200%; 
} 
</style> 
</head> 
<body> 

<p> 
This is a paragraph with a standard line-height.<br> 
This is a paragraph with a standard line-height.<br> 
The default line height in most browsers is about 110% to 120%.<br> 
</p> 

<p class="small"> 
This is a paragraph with a smaller line-height.<br> 
This is a paragraph with a smaller line-height.<br> 
This is a paragraph with a smaller line-height.<br> 
This is a paragraph with a smaller line-height.<br> 
</p> 

<p class="big"> 
This is a paragraph with a bigger line-height.<br> 
This is a paragraph with a bigger line-height.<br> 
This is a paragraph with a bigger line-height.<br> 
This is a paragraph with a bigger line-height.<br> 
</p> 

</body> 
</html>

바로 위의 예와 같이 몸 태그

출처

2017-01-04 09:43:17 baliman

를 사용하여 라인 높이 속성입니다 :

body { 
 
    line-height:2em; 
 
}

<body> 
 
    <h1>This is just a title</h1> 
 
    <div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
 
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div> 
 
</body>

이되지 않는 경우 (예를 들어, CSS 프레임 워크를 사용하는 경우) 다른 속성을 덮어 쓸 수 있기 때문일 수 있습니다. 따라서 속성에 !important 태그를 추가하십시오.

p { 
    line-height: 24px; 
}

나 :

출처

2017-01-04 09:43:49 Paul

당신은 반드시 그 라인 - 높이가 전체 사이트에 걸쳐 전 세계적으로 적용하기 위해 다음과 같은 추가 할 수 있습니다에

body, 
p { 
    line-height: 24px; 
}

출처

2017-01-04 09:48:23

답변

관련 문제