div中文本的奇怪填充/边距答案

【问题标题】：Strange Padding/Margin of text in a divdiv中文本的奇怪填充/边距
【发布时间】：2013-11-20 07:23:11
【问题描述】：

我想不通，为什么文本有边距并且不适合框：

这是我的 HTML 的摘录（请看一下小提琴）：

<!-- my Box -->
<div style="margin-bottom:50px">
<div id="kasten" style="width: 600px; height: 200px;background-color:#f0f0f0;">
<div style="margin-bottom:5px;margin-left:7px;padding-top:7px;"><b>Vitamine:</b></div>
<div style="width:300px; height:300px;float:left;margin-left:7px">
<a href="">
 » <u>Biotin </u>
 </a></br>
 <a href="">
 » <u>Vitamin A</u>
 </a></br>


 </div>
 </div>
 </div>

谢谢！

【问题讨论】：

标签： html css margin padding

【解决方案1】：

http://jsfiddle.net/SSLZR/2/

添加显示：内联块；根据您的 kasten div 的风格：

<div id="kasten" style="width: 600px; display:inline-block;height: 200px;background-color:#f0f0f0;">

【讨论】：

【解决方案2】：

一个简单的向左浮动就可以了：

<div id="kasten" style="width: 600px; height: 200px;background-color:#f0f0f0;float:left;">

http://jsfiddle.net/SSLZR/1/

【讨论】：

没问题！另外，我建议你把你的风格放在一个单独的 css 中。它会更容易阅读。

【解决方案3】：

尝试删除您的一些样式。使用更少的代码。

<body>

<!-- Vitamine -->
<div style="margin-bottom:50px">
<div id="kasten" style="width: 600px; height: 200px;background-color:#f0f0f0;">
<div style="margin-bottom:5px;margin-left:7px;padding-top:7px;"><b>Vitamine:</b></div>
<div style="width:300px; height:300px;float:left;margin-left:7px">
<a href="">
» <u>Biotin </u>
</a><br>
<a href="">
» <u>Vitamin A</u>
</a><br>
<a href="">
» <u>Vitamin B12</u>
</a><br>
<a href="">
» <u>Vitamin B6 </u>
</a><br>
<a href="">
» <u>Vitamin D </u>
</a><br>
<a href="">
» <u>Vitamin K</u>
</a><br>


</div>
<div style="width:286px; height:300px;float:left;">
<a href="">
» <u>Niacin </u>
</a><br>
<a href="">
» <u>Vitamin B1 </u>
</a><br>
<a href="">
» <u>Vitamin B2 </u>
</a><br>
<a href="">
» <u>Vitamin C </u>
</a><br>
<a href="">
» <u>Vitamin E </u>
</a><br>

</div>

</div>
</div>






<!-- Mineralstoffe -->

<div id="kasten" style=" background-color:#f0f0f0;float: left;">

<div style="margin-bottom:5px;margin-left:7px;padding-top:7px;top:0"><b>Mineralstoffe:</b></div>
<div style="width:300px; float:left;margin-left:7px;">
<a href="">
» <u>Calcium </u>
</a><br>
<a href="">
» <u>Eisen </u>
</a><br>
<a href="">
» <u>Kalium</u>
</a><br>
<a href="">
» <u>Magnesium </u>
</a><br>
<a href="">
» <u>Natrium </u>
</a><br>
<a href="">
» <u>Schwefel </u>
</a><br>
<a href="">
» <u>Zink </u>
</a><br>

</div>
<div style="width: 191px; float:left;">
<a href="">
» <u>Chlor </u>
</a><br>
<a href="">
» <u>Fluor </u>
</a><br>
<a href="">
» <u>Kupfer </u>
</a><br>
<a href="">
» <u>Mangan </u>
</a><br>
<a href="">
» <u>Phosphor </u>
</a><br>
<a href="">
» <u>Selen </u>
</a><br>
</div>


</div>










</body>

【讨论】：