如何从纯 css 中设置绘图的填充和边框样式答案

【问题标题】：How can I style padding and border of a plot from plain css如何从纯 css 中设置绘图的填充和边框样式
【发布时间】：2016-10-04 10:38:09
【问题描述】：

我有许多内联块 div，其中包含绘图。现在，我将它们全部连接到同一情节的不同实例，但最终它们将是不同的。

当我尝试为它们设置样式时，例如

padding: 10px;
border: 1px solid gray;

Plotly 提出了一个双边框并忽略了我的填充。

当然，我可以将 plotly div 包装在外部 div 中并设置它们的样式，但肯定有一种方法可以制作 plotly div，这意味着 div 具有由 Plotly.plot 获取的 id，遵守一般 CSS 而不是自己做事？

我正在使用Transcrypt Python to JavaScript 编译器和普通的plotly.js 库，没有任何远程的东西。代码如下：

HTML：

<html>
    <head>
        <style>
            div {
                display: inline-block;
                overflow: hidden;
                box-sizing: border-box;
                padding: 10;
                width: 500;
                height: 500;
                border: 1px solid gray;
            }
        </style>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    </head>
    <body>
        <div id="lin"></div>
        <div id="log"></div>
        <div id="polar"></div>
        <div id="ribbon"></div>
        <div id="wireframe"></div>
        <div id="surface"></div>
        <div id="bar"></div>
        <div id="pie"></div>
        <div id="gant"></div>

        <script src="__javascript__/plotly_demo.js"></script>
    </body>
</html>

Python：

__pragma__ ('jskeys')   # For convenience, allow JS style unquoted string literals as dictionary keys

import numscrypt
import math

xValues = [2 * math.pi * step / 200 for step in range (201)]
yValues = [math.sin (xValue) + 0.5 * math.sin (xValue * 3 + 0.25 * math.sin (xValue * 5)) for xValue in xValues] 

for id in ('lin', 'log', 'polar', 'ribbon', 'wireframe', 'surface', 'bar', 'pie', 'gant'):
    Plotly.plot (
        document.getElementById (id),
        [{
            x: xValues,
            y: yValues
        }],
        {
            margin: {t: 0}
        }
    )
}

【问题讨论】：

标签： css plotly transcrypt

【解决方案1】：

我已更新您的标记。用.wrapper 元素包裹你的图表div，以便于格式化。内联块元素在屏幕上创建一些空间，您可以简单地使用 CSS float 属性来防止这种情况。不要忘记清除浮动以防止父级崩溃，就像我在更新的代码中所做的那样。我还应用了一些负边距来消除双边框：

<html>
<head>
<style type="text/css">
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .wrapper{
        padding: 1px 0 0 1px;
    }
    .wrapper div {
        float: left;
        overflow: hidden;
        box-sizing: border-box;
        padding: 10px;
        width: 500px;
        height: 500px;
        border: 1px solid gray;
        margin-top: -1px;
        margin-left: -1px;
    }
</style>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
    <div class="wrapper clearfix">
        <div id="lin"></div>
        <div id="log"></div>
        <div id="polar"></div>
        <div id="ribbon"></div>
        <div id="wireframe"></div>
        <div id="surface"></div>
        <div id="bar"></div>
        <div id="pie"></div>
        <div id="gant"></div>
    </div>
    <script src="__javascript__/plotly_demo.js"></script>
</body>
</html>

您可以查看此页面以了解 .clearfix 的实际工作原理 - http://www.tutorialrepublic.com/css-tutorial/css-alignment.php

【讨论】：

我已经尝试过你的 HTML，但我仍然得到双边框，并且 10 像素的填充被忽略了。我所追求的是每个图周围的单线边框，如 CSS 中所指定。
只需将此代码复制并粘贴到空白 HTML 文件中，然后在浏览器中查看该页面。你会明白我想说什么。
这正是我所做的。我打开了一个空文件并将您的 html 复制到其中。然后将其加载到浏览器中。这些图现在是相邻的，这是我不想要的，但边界仍然不是一条线，而是每个图的框中的一个框。因此，如果每个图形都有自己的单独边框，而不是合并边框，那就没问题了。但我希望每个图表只有一个边框。现在有一个细的外边框和一个内边框，其左侧和顶部是2px而不是一个，产生一种阴影效果。