我见过很多人提到你不应该在CSS的同一个元素上使用宽度和填充或边距。 这是为什么?

===============>>#1 票数:8 已采纳

因为某些浏览器将宽度视为包含填充和边距的元素的总宽度,而其他浏览器将宽度视为添加填充和边距的基本宽度。 因此,您的设计在不同浏览器中看起来会有所不同。

有关更多信息,请参阅Box ModelQuirksmode的 W3C页面

===============>>#2 票数:4

很多人仍然坚持IE中有关错误的盒子模型的概念,并认为如果你开始搞乱元素宽度,填充和边距,你就会遇到麻烦。

这是过时的建议 - 假设你使用的是正确的doctype ,所有相当现代的浏览器(包括IE6 +)都可以使用相同的盒子模型,你不应该有太多与之相关的问题。

这是CSS,你显然会有其他一百万跨浏览器问题,但臭名昭着的IE盒子模式正在成为过去。

===============>>#3 票数:2

我从来没有遇到过将宽度,填充和/或边距放在一起造成的问题。

只要你有一个有效的DOCTYPE并且不是Quirks模式,你就会有一个可预测的盒子模型,因此应该使用最合适的边距/填充来表示你想要做的事情。

注意:边距适用于边框之外,填充适用于边框内部。 宽度表示容器的内部宽度,总宽度=边距+边框+填充+宽度(记住前三个都是为左侧和右侧添加的)。

===============>>#4 票数:0

您是否声明填充和/或边距值不应与也分配了宽度值的DOM元素共存? 如果是这样,那么只有当您不想编写与IE兼容的CSS以及实现Web标准的浏览器(例如Firefox)时才会这样。 如果没有一些边距或填充值,通常很难实现您正在寻找的布局。 但我建议您编写兼容两种浏览器的CSS。 如果这不是你要求的,那么请纠正我:)

===============>>#5 票数:0

原因可能是着名的箱型问题

简介:如果填充和边距与宽度或高度一起使用,则IE渲染宽度与标准渲染不同。

===============>>#6 票数:0

我可以想到两个原因:

1)IE的旧“盒子模型”真的很薄,所以当你有一个风格{width:300px; 填充:30px; margin:20px;}它的轮廓可能实际上不匹配预期的400px(300 px大小,加上2 30px填充,加上2 20 px边距。我认为它的实际宽度将是340,因为它将填充滚动到宽度计算中。

带来的是......

2)有些人发现计算有点令人困惑。

也就是说,我个人使用宽度以及填充和边距,并没有任何问题。 如果你在使用填充/边距时限制自己不使用宽度,这意味着你正在使用大量的非语义错误来编写代码。 它确实意味着你必须要知道各种浏览器将如何处理元素,但这就是我们为什么要浏览它的原因。

===============>>#7 票数:0

需要注意的一点是,它几乎不可能使用百分比宽度。 以此为例,如果您希望“content”div采用整个宽度,但是使用10px填充:

#content {
    width: 100%;
    padding: 0 10px;
}

这适用于(明智的,但不正确的)IE模型,但在符合标准的浏览器中,你的div将占据100%+ 20px的宽度,这是不好的。 解决方案是使用另一个“内部”容器。

<div id="content">
    <div class="inner">
        content here.
    </div>
</div>

#content {
    width: 100%;
}
#content .inner {
    padding: 0 10px;
}

有额外的标记有点烦人,但从长远来看它会使很多事情变得容易。

  ask by davethegr8 translate from so

未解决问题?本站智能推荐:

1回复

同一元素的样式不同

我有一个由应用程序使用模板生成的网站。 我的问题是我试图在某些图像上使用某些过渡效果。 图像和过渡的代码在<ul> & <li>元素中设置,但会弄乱模板<ul> & <li>样式。 有没有办法让我设置一些仍以<ul&
2回复

如何在同一元素上使用.hover和.click

这个想法是在悬停时向下移动一个div,当点击进一步向下移动以显示内容时。 问题是,当你点击div并向下移动时,你不再在它上面盘旋,所以它执行'关闭时没有悬停功能。
1回复

在同一元素上使用CSS Child和Last Selector

我在bootstrap panel-footer使用glyphicons有不同的链接,如下所示: 如您所见,我需要使用我自己的margin-right类为最后a -child元素应用额外的margin: .margin-right { margin-right: 5px; }
1回复

在同一元素上使用多个.style.transform

似乎通过连续使用两个obj.style.transform情况导致只执行第一个语句。 请参阅以下代码。 CodePen就是一个完整的例子。 在完整示例中,我正在从包含对象的x,y和z位置的文本区域中读取线条,将值从弧度转换为度数,然后使用这些值为我的3d对象设置动画。
2回复

更改另一个div上的CSS无法正常工作,因为它不在同一元素中

当我将鼠标悬停在#id1时, #match1不会改变吗? 当它们都位于页面上的同一div元素中时,它起作用了,但是当#id1位于另一个div中时,它们现在停止了工作。 我只想使用CSS no javascript! http://jsfiddle.net/fHZEN/ 的HT
3回复

清除同一元素中的浮动

我有给定宽度和float:left的p.test。 该div仅占全宽的一半。 因此,如果我在p.test之后创建了下一个元素,它将与p.test在同一行。 我使用p而不是div,因为这与tinymce人员有关,并且在我的场景中div无法使用。 我想写一个CSS规则:“即使p.test
5回复

同一元素的下标和上标

是否可以将下标和上标都添加到同一元素? 如果我做 上标出现在下标之后。 我想我要做的是做这样的事情: 它似乎可以完成工作,但是非常难看。 还有更好的主意吗? 谢谢!
1回复

在同一元素上重新启动CSS动画

我刚刚开始使用Javascript控制的CSS动画,我遇到了一个问题,我确信这很简单...... 我想要实现的目标是什么? 我希望有一种图像区域,其中一些图像显示增加不透明度效果:我希望每个新图像在用户点击图像时出现在另一个上。 我如何努力实现它? 我有一个“div”,其
3回复

单击和悬停功能在同一元素上

我在将鼠标悬停/离开/单击功能时遇到了一个小问题。 它工作正常,但是单击该元素后,它将失去悬停功能。 单击该元素后,我将无法获得悬停功能。 jsfiddle- http://jsfiddle.net/squidraj/SVkBs/1/ 不知道我在哪里做错了。谢谢。
2回复

CSS3同一元素的多个转换

我正在尝试为我的一个背景图像制作下拉效果。 我能够使用css3做到这一点,但它并不完整。 效果应该是一个下降的窗帘,然后有点反弹。 css3的问题在于我不知道如何对同一属性进行转换,因为最后一个会覆盖以前的属性。 这是我的代码: 任何帮助将非常感激。