分享
三行代码  ›  专栏  ›  技术社区  ›  ChippyT

如何修复两个文本框之间的间隙? - How to fix the gap between the 2 text boxes?

  •  -1
  • ChippyT  · 技术社区  · 1 周前

    我试图创建一个简单的提醒系统,你张贴一个标题和一些文字,你得到你的帐户页上的提醒。问题是,标题和文本所在的框相距太远,我宁愿它们之间没有间隙。

    我目前正在运行这个从文件,我已经尝试了一些混乱的css,但没有真正的工作。

    <html>
        <head>
            <link rel="stylesheet" href="cssforsite.css">
        </head>
        <body bgcolor=#b8b6f2>
            <p>This is a test</p>
            <hr>
            <h2 style="background-color: #9693ed ; padding: 10px; border: 1px solid rgb(172, 117, 235);">Text</h2>
            <p style="background-color: #7b77ed ; padding: 10px; border: 1px solid rgb(131, 93, 238);">text</p>
        </body>
    </html>
    
    .centre {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
      }
    
    
      h1 {color: lightblue}
      h2 {color: blue}
    
      a:link {
        color: lightblue;
        padding: 7.5px 21.5px; 
        background-color: blueviolet; 
        text-decoration: none;
        display: inline-block;
      }
    
      a:visited {
        color: lightblue;
        padding: 7.5px 21.5px;
        background-color: blueviolet;
        text-decoration: none;
        display: inline-block;
      }
    
      a:hover {
        color: lightblue;
        background-color: purple;
        text-decoration: underline;
      }
    
      a:active {
        color: lightgreen;
        background-color: transparent;
        text-decoration: underline;
      }
      hr {
        border-color: purple;
        }
    
    .right {
      display: inline-block;
      margin-left: auto;
      margin-right: auto;
      width: auto;
      position: absolute;
      right: 50px;
      width: 100px;
      height: 18px;
    }
    div.ignore-css{all:unset;}
    

    如果我把br放进去,我希望会有一个空白,但如果我把它留空就不会了。

    1 回复  |  直到 1 周前
        1
  •  2
  •   twoTimesAgnew    1 周前

    这里的问题是html元素对于某些属性具有某些默认值。例如,如果我们看看 this list from w3schools ,我们可以看到 <h2> 具有以下默认值:

    h2  display: block;
        font-size: 1.5em;
        margin-top: 0.83em;
        margin-bottom: 0.83em;
        margin-left: 0;
        margin-right: 0;
        font-weight: bold;
    

    <p> 具有以下特征:

    p   display: block;
        margin-top: 1em;
        margin-bottom: 1em;
        margin-left: 0;
        margin-right: 0;
    

    如果要删除默认页边距,可以执行的操作是专门设置 margin-bottom margin-top 元素的属性设置为0。