Question

Q值。如何删除div#inlineblock底部的额外空格？它为什么存在？

div {
  width: 150px;
  padding-top: 5px;
  text-align: center;
  background-color: #f3f6db;
  font-family: "Arial";
}

hr {
  border-color: red;
  border-width: 1px 0px;
  border-style: solid;
  transition: width .2s linear;
}

div#inlineblock {
  display: inline-block;
}

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <div id="block"><span>Block</span>
    <hr/>
  </div>
  <div id="inlineblock"><span>Inline Block</span>
    <hr/>
  </div>
</body>

</html>

我很欣赏很好的参考资料。：P

感谢。

Answer 1

#inlineblock底部的空格实际上是hr的边距。如果重置该边距，您将看到“空格”消失。

div {
  width: 150px;
  padding-top: 5px;
  text-align: center;
  background-color: #f3f6db;
  font-family: "Arial";
}

hr {
  border-color: red;
  border-width: 1px 0px;
  border-style: solid;
  transition: width .2s linear;
}

div#inlineblock {
  display: inline-block;
}
#inlineblock hr {
    margin:0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <div id="block"><span>Block</span>
    <hr/>
  </div>
  <div id="inlineblock"><span>Inline Block</span>
    <hr/>
  </div>
</body>

</html>

Answer 2

所以，这里发生的事情是<hr />有一个保证金（对于<hr />元素来说是正常的）并且它的处理方式不同。

如果是#block，则受margin collapsing约束，但#inlineblock则不受margin-bottom:0约束。

您可以在hr元素上指定div { width: 150px; padding-top: 5px; text-align: center; background-color: #f3f6db; font-family: "Arial"; } hr { border-color: red; border-width: 1px 0px; border-style: solid; transition: width .2s linear; margin-bottom: 0; /* NEW */ } div#inlineblock { display: inline-block; }来解决此问题。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <div id="block"><span>Block</span>
    <hr/>
  </div>
  <div id="inlineblock"><span>Inline Block</span>
    <hr/>
  </div>
</body>

</html>

＆＃13;

margin-bottom

＆＃13;

您现在注意到这已将两个元素推到一起，因此您可能需要根据所需的确切效果向div添加string。

Answer 3

hr元素的
margin-bottom（和top）默认值为8px，您必须将其设置为0px。

#inlineblock hr {
    margin-bottom: 0;
}

div {
  width: 150px;
  padding-top: 5px;
  text-align: center;
  background-color: #f3f6db;
  font-family: "Arial";
}

hr {
  border-color: red;
  border-width: 1px 0px;
  border-style: solid;
  transition: width .2s linear;
}

#inlineblock hr {
    margin-bottom: 0;
}

div#inlineblock {
  display: inline-block;
}

 <div id="block"><span>Block</span>
    <hr/>
  </div>
  <div id="inlineblock"><span>Inline Block</span>
    <hr/>
  </div>

Answer 4

您还可以使用以下内容：

class ViewController: UIViewController {

    @IBOutlet weak var displayResultLabel: UILabel!

    @IBAction func showActionSheetButtonAction(_ sender: UIButton) {
        let actionSheetController = UIAlertController(title: nil, message: nil, preferredStyle: .actionSheet)

        actionSheetController.addAction(
            UIAlertAction(title: "Copy", style: .default, handler: { [weak self] _ in
                guard let strongSelf = self else { return }

                UIPasteboard.general.string = strongSelf.displayResultLabel.text
            })
        )

        actionSheetController.addAction(
            UIAlertAction(title: "Paste", style: .default, handler: { _ in
                // Where to handle when the Paste button is pressed
            })
        )

        actionSheetController.addAction(
            UIAlertAction(title: "View Memory", style: .default, handler: { _ in
                // Where to handle when the View Memory button is pressed
            })
        )

        actionSheetController.addAction(UIAlertAction(title: "Cancel", style: .cancel, handler: nil))

        present(actionSheetController, animated: true, completion: nil)
    }
}

内联块的额外高度

4 个答案: