1

我在 div 中有一个 div。外部 div 的工作是定位框，而内部 div 的工作是定位文本。这些 div 在一个更大的 div 中，但我认为这不是问题所在。当我尝试在外部 div 上放置填充，或者换句话说移动盒子时，填充被应用到内部 div 并且盒子因此在那个方向上变得更大。左上角总是粘在它所在的另一个 div 上。如何使填充应用于盒子的外部而不是内部？

这是格式：

<div style="width:100px;
            height:50px;
            padding-left:10px;
            padding-top:10px;
            border: 3px solid #D8BFD8;
            align:center;">
   <div style="font-size:x-large;
               padding-left:40px;
               padding-top:0px;
               font-family:'Arial';
               color:black;">
     Profile
   </div>
 </div>
4

3 回答 3

0

不太确定，但是通过移动外框，您确定您没有误用边距填充？填充应用于 div 的内部。

我刚变

padding-left:10px;
padding-top:10px;

到左边距：10px；边距顶部：10px；

并增加它以使其更明显。还移动了内联 css 以使其更清晰。

http://jsfiddle.net/H334r/3/

于 2013-08-06T16:46:24.347 回答
0

填充应用于元素内部。

来自 W3Schools，填充清除元素内容周围（边框内）的区域。填充受元素背景颜色的影响。

因此，如果您将填充应用于外部 div（宽度为 100 像素的 div），则其中的元素会受到影响。

您可能想看看使用边距。或者，如果将填充设置为外部 div 的父级会更好；这样，外部 div 的父级内的所有元素都将均匀分布。

我看到你的外部 div 有“对齐：中心”。尝试使用“边距：自动”。

于 2013-08-06T16:47:43.673 回答
0

1 - 为了可读性，最好不要将一堆语言混在一起，即使 web 开发人员时不时地需要它。

因此，将 css 分离并放入或使用 css 样式表。

2 - 您需要相对于页面的外部 div。所以在css中，位置：相对。而内部 div，则要使用绝对位置。所以位置：绝对。

我冒昧地清理了代码并将其扔到了 jsFiddle 中。http://jsfiddle.net/w7Ltp/1/

但是如果你想把它扔到一个 html 页面中。

<style>
#outerbox{
width:100px;
height:50px;
padding-left:10px;
padding-top:10px;
border: 3px solid #D8BFD8;
align:center;
position: relative;
}
#innertext{
    position: absolute;
    font-size:x-large;
    padding-left:10px;
    padding-top:0px;
    font-family:'Arial';
    color:black;
}
</style>

<div id="outerbox">
   <div id="innertext">
      Profile
   </div>
 </div>
于 2013-08-06T16:47:59.963 回答