2017-12-11 10 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

他の質問に対する答えは理由を説明しています。これはデフォルトでpreにCSSが適用されているためです。言いたいことはあまりありません。私はこの質問を非常にひどく締めたい。 –

+1

[シンプルなHTML Webページの空白を削除できません](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>を実行してください。

関連する問題