Question

var serializer = Serialization.FindSerializerFor(e.Payload);
var binary = serializer.ToBinary(e.Payload);
AddParameter(command, "@Payload", DbType.Binary, binary);

.rectangle {
    width: 420px;
    height: 143px;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    padding: 20px 0px 20px 10px;
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.triangle {
    width: 0;
    height: 0;
    border-top: 92px solid transparent;
    border-bottom: 92px solid transparent;
    border-left:45px solid rgba(0, 0, 0, 0.7);
    display: inline-block;
}

.block {
  width: 200px;
  height: 80px;
  background: red;
}

它来自哪里？如何在没有负边距的情况下摆脱它（因为在某些屏幕上它们可能重叠）。

Answer 1

这个

有很多解决方案

解决方案0：元素之间没有空格

<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>

解决方案1：字体大小：0在父级

.inline-block-list { /* ul or ol with this class */
    font-size: 0;
}

.inline-block-list li {
    font-size: 14px; /* put the font-size back */
}

解决方案2：HTML评论

<ul>
    <li>Item content</li><!--
 --><li>Item content</li><!--
 --><li>Item content</li>
</ul>

解决方案3：负保证金

.inline-block-list li {
    margin-left: -4px;
}

解决方案4：降低关闭角度

<ul>
    <li>Item content</li
 ><li>Item content</li
 ><li>Item content</li>
</ul>

more about this

Answer 2

其他答案提供了解决方案，但 为什么 会发生这种情况：

Some given funny joke
-----^---------^-^

在那个字符串中我标记了三个字符。这三个人所谓的'decenders'（例如：G下的循环，Y和J下的腿）。
当您声明inline-block内容时，它会获取block和inline元素的属性。内联元素通常是文本（例如a或span ），因此具有下行，因此您的div有下行空间。

为什么 设置line-height:0; font-size:0;可以解决问题。

Answer 3

在这种情况下，您可以使用CSS伪元素:after。

检查以下示例：

＆＃13;

.rectangle {
  width: 420px;
  height: 143px;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  padding: 20px 0px 20px 10px;
  position: relative;
  vertical-align: top;
}
.rectangle:after {
  top: 0;
  left: 100%;
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 92px solid transparent;
  border-bottom: 92px solid transparent;
  border-left: 45px solid rgba(0, 0, 0, 0.7);
}
.block {
  width: 200px;
  height: 80px;
  background: red;
}

＆＃13;

<div class="rectangle"></div>
<div class="block"></div>

＆＃13;

Answer 4

由于line-height，你的.rectangle身高错过了1个像素（143-> 144）

注意：我不确定，如果这是跨浏览器，请考虑使用float: left代替

.rectangle {
    width: 420px;
    height: 144px;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    padding: 20px 0px 20px 10px;
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.triangle {
    width: 0;
    height: 0;
    border-top: 92px solid transparent;
    border-bottom: 92px solid transparent;
    border-left:45px solid rgba(0, 0, 0, 0.7);
    display: inline-block;
}

.block {
  width: 200px;
  height: 80px;
  background: red;
}
.wrapper{
  line-height: 0;
}

<div class="wrapper"><div class="rectangle"></div><!--
--><div class="triangle"></div><!--
--><div class="block"></div></div>

Answer 5

将font-size:0用于父元素

两个内联块和块元素之间的垂直空间

5 个答案: