【问题标题】:I can't remove the space above and below a paragraph我无法删除段落上方和下方的空格
【发布时间】:2021-05-07 15:00:19
【问题描述】:

我无法删除网页顶部仅包含字母“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>

【问题讨论】:

    标签: html css padding margin line-height


    【解决方案1】:

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

     p {
    margin: 0;
    padding: 0;
     }
    

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

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

    【讨论】:

      【解决方案2】:

      你可以这样做 ->

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

      my 代表上边距和下边距, py 代表 padding top padding top 和 padding bottom

      【讨论】:

        【解决方案3】:

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

        p {
        margin: 0;
        padding: 0;
        

        }

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

        【讨论】:

        • 嗨,John,我刚刚在 .initial 中添加了“padding-top”和“padding-bottom”,但它根本没有改变。谢谢
        • 您可以将 !important 用于 padding-top 或 margin-top 谢谢
        【解决方案4】:

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

        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;
        }
        

        【讨论】:

          猜你喜欢
          • 2015-04-28
          • 1970-01-01
          • 1970-01-01
          • 2020-10-08
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2015-05-11
          • 1970-01-01
          相关资源
          最近更新 更多