2017-12-11 3 views
-4

이것이 왜 여분의 라인을 생성하는지 궁금합니다.왜 여분의 라인이 생성됩니까?

다른 것으로부터 찾았습니다 question. 그들은 그것이 CSS 때문이 아니라고 말합니다, HTML에 의한 이유는 무엇입니까?

나는 이런 모습을 본적이 없습니다. 은 왜 내가 다른 방법으로 그것을 제거 할 수있는 방법

필요 설명

<html> 
 

 
<head> 
 
<!-- CSS --> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/themes/prism-coy.css" /> 
 

 
<!-- JS --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/prism.min.js"></script> 
 

 
<style> 
 
pre{margin:0px;border:2px solid red;} 
 
pre::before,pre::after,code::before,code::after{height:0!important;} 
 
pre[class*="language-"]:before, pre[class*="language-"]:after{height:0px!important;display:inline-block;} 
 
code{border-bottom:2px solid green;} 
 
</style> 
 

 
</head> 
 
<body> 
 

 
<pre class="brush: html line-numbers language-html"> 
 
<code ="language-html">&lt;html&gt; 
 
&lt;head&gt;&lt;/head&gt; 
 
&lt;body&gt; 
 
Hi, my name is Peter Martin. 
 
This is my first program in HTML. 
 
&lt;/body&gt; 
 
&lt;/html&gt;</code> 
 
</pre> 
 

 
</body> 
 
</html>

` 하지?

+1

': before &': after' 규칙은 아무 것도하지 않습니다. – SLaks

+1

다른 질문에 대한 대답은 이유를 설명하고, CSS가 기본적으로 사전에 적용 되었기 때문입니다. 말할 게별로 없습니다. 나는이 질문을 매우 나쁘게 끝내고 싶다. –

+1

[간단한 HTML 웹 페이지에서 빈 공간을 제거 할 수 없음]의 가능한 복제본 (https://stackoverflow.com/questions/47754731/unable-to-remove-blank-space-in-simple-html-webpage) –

답변

2

html로 <pre> 요소는 </code></pre> 사이에 줄 바꿈을 가지고 있기 때문에

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre

따라서 HTML 파일에 기록 된대로 정확하게 을 제시하는 서식이 텍스트를 나타냅니다 , 그것은 문자 적으로 그것을 렌더링하고 있습니다.

당신이 원하지 않는 경우 </code></pre>.

관련 문제