Question

这两个p元素之间。

我检查了盒子模型，没有设置边距。

这里是小提琴和代码 -

<body>

<style>
#container{
  display: inline-block;
  width: 500px;
  border: solid 1px;
  text-align: center;
}
#si_but{
  cursor:  pointer;
  padding:  14px 14px;  
  font-size: 14px;
  border: solid 1px;
  margin: 0px;
  display: inline-block;
}
#su_but{
  cursor:  pointer;
  padding:  14px 14px;  
  font-size: 14px;
  border: solid 1px;
  margin: 0px;
  display: inline-block;

}
#hold_button{
  display: inline-block;
  border: solid 1px;
  text-align: center;
  margin: 0 auto;
  padding: 0px;
}
</style>


<div id="container">
  <divi id="hold_button">
    <p id='si_but' class='blue_but   radius_left  medium_white'>SignIn</p>
    <p id='su_but' class='orange_but radius_right medium_white'>SignUp</p>
  </div>
</div>

</body>

Answer 1

您在第一个newline之后</p>并在第二个spaces之前缩进<p>。

如果将<p>个元素放在一行中，则该空格将消失。

<div id="container">
    <div id="hold_button">
        <p id='si_but' class='blue_but radius_left medium_white'>SignIn</p><p id='su_but' class='orange_but radius_right medium_white'>SignUp</p>
    </div>
</div>

并且，<divi>应该是<div>的拼写错误。

Answer 2

这是因为如果HTML代码中的空格分隔，则所有内联块元素都在左侧有空格。要解决此问题，您应将其更改为<ul>或<div>元素，或为其中一个元素添加负边距。
将margin-left: -5px;添加到#su_but也可以解决这个问题，尽管它有点笨拙。

Answer 3

如果您将<p>元素放在代码中的一行上，则会消除差距。

<p id='si_but' class='blue_but   radius_left  medium_white'>SignIn</p><p id='su_but' class='orange_but radius_right medium_white'>SignUp</p>

DEMO：https://jsfiddle.net/f3m2apgy/6/

Answer 4

解决#hold_button { font-size: 0; }提出的空白问题的常用方法是将父元素的font-size设置为零。当然后果是你必须在子元素上重新设置必要的字体大小 - 你已经在你的例子中做了，所以

Console.WriteLine("This is a calculator");
"
int iNum1;
int iNum2;
string sOper = "";

已经解决了你的问题。

https://jsfiddle.net/f3m2apgy/7/

这个空间来自两个元素之间的位置？

4 个答案: