我无法删除段落上方和下方的空格

问题描述

我无法删除网页顶部仅由字母“I”组成的段落上方和下方的空格。

我已经尝试使用“margin”和“padding”属性删除它，但它没有改变。我也试过，对于属性“line-height”，值 1 使行高与文本的大小完全匹配，但它也不起作用。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Came</title>
<link rel="stylesheet" media="screen" href="http://fontlibrary.org/face/kolar" type="text/css"/> 
<style>
        
body{
background-color:black;
color:white;}

.photo{
margin-top:0px;
margin-bottom:0px;
padding-top:0px;
padding-bottom:0px;
border:5px solid white;}

.initial{
font-size:500px;
line-height:1;
padding-top:0px;
padding-bottom:0px;

}

.main{
margin-top:0px;
margin-bottom:0px;}


h1{
font-family:KolarExtraBold;
font-size:20px;
border:solid 3px red;
width:65%;
margin: 0 auto;
margin-bottom:3px;}
</style>

</head>

<body>

<div class="photo">

<p class="initial">I</p>

</div>


<div class="main">
<h1><strong>CSS</strong> The Manual</h1>
</div>
</body>
</html>

解决方法

标签距顶部和底部的默认边距为 1em。因此，您需要明确定义边距和填充都等于 0，这可以通过 2 种方式完成。

 p {
margin: 0;
padding: 0;
 }

或者像这样删除边距和填充

<p class="initial my-0 py-0">I</p>

你可以简单地这样做 ->

<p class="initial my-0 py-0">I</p>

其中 my 代表边距顶部和边距底部以及 py 代表 padding top padding top 和 padding bottom

元素通常有边距和/或填充。您可以在样式表中将它们设置为零。

p {
margin: 0;
padding: 0;

}

然而，从语义上讲，有一个段落列表是相当不寻常的。

用户代理还为段落元素添加样式：

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

您可以为 p 元素添加规则以删除此边距。

删除边距后，字母下方的 en 上方仍有空间。这是由于您设置的行高。此行高需要容纳不同的字母，因此在字母上方和下方期望空间是正常的。如果您只想要这个字母并且它的上下空间很小，您可以将行高设置为 .655。

.initial {
    margin: 0;
    line-height: .655;
}

html line-height margin padding

我无法删除段落上方和下方的空格

问题描述

解决方法

相关问答