Question

如何将div和ul元素的顶部和底部填充设置为0？

以下是我想要的效果的屏幕截图：

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
    prefer: {
    Chrome: "CommonHTML"
    },
    jax: ["input/TeX", "output/HTML-CSS"],

    tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    "HTML-CSS": { color: "red"}
    },
    displayAlign: "left"
    });
</script>
<script type="text/javascript" async
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js? 
config=TeX-MML-AM_CHTML">
</script>
</head>
<body id="body">
<div>
    <div style="border: 1px solid">
        \[My custom text\]
    </div>

    <ul style="border: 1px solid">
        <li style="border: 1px solid blue">\[x^2+x^4-x^5\]</li>
        <li style="border: 1px solid red">\[y^2+y^4-y^5\]</li>
    </ul>    
</div>  
</body>
</html>

Answer 1

很少有CSS（带有适当的选择器）可以解决问题：

隐藏空元素
重置边距

li *:empty{
  display: none;
}


.mjx-chtml.MJXc-display{
  margin: 0;
}

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
    prefer: {
    Chrome: "CommonHTML"
    },
    jax: ["input/TeX", "output/HTML-CSS"],

    tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    "HTML-CSS": { color: "red"}
    },
    displayAlign: "left"
    });
</script>
<script type="text/javascript" async
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML">
</script>
</head>
<body id="body">
<div>
    <div style="border: 1px solid">
        \[My custom text\]
    </div>

    <ul style="border: 1px solid">
        <li style="border: 1px solid blue">\[x^2+x^4-x^5\]</li>
        <li style="border: 1px solid red">\[y^2+y^4-y^5\]</li>
    </ul>    
</div>

如何在MathJax中删除数学的顶部/底部填充？

1 个答案: