如何减少文章中图表周围的填充

Question

我已经使用 Plotalot 扩展在我的 Joomla 网站上创建了不同类型的图表。我尤其对图表周围的边距有疑问。我已将图表放在一个容器中，虽然我已将图表制作成几乎与容器一样大，但它在两侧和底部留下了大量的边距。我不太确定如何减少它周围的白色区域。

这是我目前对容器和图表的 CSS，以及图表本身的代码：

#chart_42_container   {
clear: right;
float: right;
margin-left: 1px;
 width: 577px;
 height: 400px;
}

#chart_42 {
 height: 398px;
 width: 575px;
}

google.load('visualization', '1.0', {packages:['corechart']});
google.setOnLoadCallback(create_chart);
function create_chart() {
window.plotalot_chart_42_data = new google.visualization.DataTable();
window.plotalot_chart_42_data.addColumn('string', 'Labels');
window.plotalot_chart_42_data.addColumn('number', 'Values');
window.plotalot_chart_42_data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
window.plotalot_chart_42_data.addRows(
[['96 Users',96,'<strong>96 Users</strong><br />Criticized the Suction of the Bissell Spotlifter 1716B'],['31 Users',31,'<strong>31 Users</strong><br />Praised the Suction of the Bissell Spotlifter 1716B'],['300 Users',300,'<strong>300 Users</strong><br />Did Not Mention the Suction of the Bissell Spotlifter 1716B in their Review']]);
window.plotalot_chart_42_options = {title:'Breakdown of Comments About the Bissell Spotlifter 1716B\u0027s Suction Capability',backgroundColor:'#ffffff',is3D:true,pieSliceText:'value',legend:{position:'right'}
,tooltip: {isHtml: true}}
window.plotalot_chart_42 = new google.visualization.PieChart(document.getElementById('chart_42'));
window.plotalot_chart_42.draw(window.plotalot_chart_42_data, window.plotalot_chart_42_options);
}

这是我在文章中的 HTML：

<div id="chart_42_container">{plotalot id="42"}
<i>If you're wondering why the total of the three groups displayed in this graphs is greater than the number of reviews we analyzed (425) for the Bissell Spotlifter 1716B, this is because there were 2 reviews that made both positive and negative remarks about this unit's suction.</i>    
</div>

我尝试使用 <em> 标签在图表下方 space 中的图表下方添加斜体评论，但这已被下推并与其中一个段落中的文本重叠.

这是带图表的部分：https://www.reviewminr.com/product-reviews/carpet-cleaner-reviews/bissell-spotlifter-1716b-review#suction

我知道一定有可能以某种方式减少这些边距，就像在扩展程序的演示站点上一样，他们有两个相同的饼图，这些饼图有 none 这些大的白色边距，他们也有斜体的评论在图表的正下方。

有什么想法吗？提前致谢。

Answer 1

更改 chart_42_container

的高度

#chart_42_container{height:500px}

然后文本将显示在容器中

边距与 chart_42

的高度有关

#chart_42{height:398px;}

如何减少文章中图表周围的填充

How Do I Reduce the Padding Around a Chart Within an Article

html

css

joomla

charts