是边距和填充最不平衡的事情在所有浏览器？ [英] are margin and padding most disbalanced thing among all browser?

问题描述

虽然有些人使用此重置。
* {
margin：0;
padding：0;
}

每个元素在每个浏览器默认样式表中都有默认边距和填充量（但不同）？

虽然eric meyer收集了一些最常用的选择器，并给予所有

  {
 margin：0; 
 padding：0; 
 border：0; 
 outline：0; 
 font-size：100％; 
 vertical-align：baseline; 
 background：transparent; 
} 
  

这些元素是否有不同类型的字体大小？
不同的基线，不同的背景，轮廓和边框？

如果我们保持通用选择器的缺点。

是这个

  * {
 margin：0; 
 padding：0; 
 border：0; 
 outline：0; 
 font-size：100％; 
 vertical-align：baseline; 
 background：transparent; 
} 
  

比这更好

  * {
 margin：0; 
 padding：0; 
} 
  

解决方案

此处： CSS2.1用户代理样式表默认值< a>。

如果您仔细调查此列表，则会注意到浏览器特定的边距仅设置为 HTML标准阻止元素，并且没有设置浏览器特定的填充。换句话说， padding：0 是多余的。但实际上， margin 是浏览器中最不平衡的，以回答您的实际问题。

在这里踩着某人的脚趾，但在我最笨的看法使用CSS重置样式表是可笑的。您必须自己重新定义大多数边距（和paddings）。你可以这样做，只是学习和保持自己的定义自己的边缘（如果必要填充）为每一个块元素，你要在文档中使用的规则。

关于重置的剩余：

• border：0 也是superflous。 < hr> 和大多数形式的输入元素是唯一具有默认边框的元素。没有它，< hr> 是不可见的（实际上，这在IE6 / 7中失败），并且具有相同背景颜色的表单上的文本输入元素也是不可见的。




• 大纲肯定不会重设，您需要自行控制，例如重置它自己只有与（背景）图像的链接，因为这是重置它的主要原因。但仍然，它打破了可访问性。




• font-size： 100％会强制您自己在< h1> ，< h2> ，等元素。但即使没有重置，你也经常已经喜欢这样做了。




• vertical-align：baseline; code>< sub> 和< sup> ，使它们看起来像< small& / code>。此外，表头也可能受影响。这些默认值在所有浏览器中 middle 。您需要自己重新定义 。此外，已知此重置可能会导致IE6 / 7对图像造成破坏。




• 对我不清楚。我没有看到这个复位的任何点，希望它可能使IE6 / 7疯了。您还需要重新定义所有表单输入元素的背景颜色，这只是添加了更多的工作（对于这种情况，它们放在一个有色容器中）。

p> Enfin，看看你对这些信息做了什么。我不阻止你使用CSS重置。我自己发现CSS重置只有有用> 10年前，当我刚刚开始与HTML / CSS。但是，随着年岁的增长，我也学到了，这是纯粹的废话。但我承认，这对初学者是有用的，因为重置将迫使他们自己设置边距和其他东西自己。如果没有重置，你可以做得很好。

While some people use this reset. * { margin: 0; padding: 0; }

Is every element has default margin and padding in each browser default stylesheet( but differently)?

While eric meyer collected some most used selectors and given this to all

{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

Are those elements has different type of font sizes? different baseline, different background, outline and border?

if we keep besides cons of universal selector.

is this

* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

better than this

* {
  margin: 0;
  padding: 0;
}

解决方案

You can find all default styles here: CSS2.1 User Agent Style Sheet Defaults.

If you investigate the list closely, then you'll notice that the browser-specific margins are only set for HTML-standard block elements and that nowhere a browser-specific padding is been set. In other words, the padding: 0 is superfluous. But indeed, the margin is the most disbalanced among browsers, to answer your actual question.

I am probably going to tread on someone's toes here, but in my humblest opinion using a CSS reset stylesheet is ridiculous. You would have to redefine most of those margins (and paddings) yourself anyway. You could as good just learn and keep yourself the rule to define yourself the margin (and if necessary padding) for every block element which you're going to use in the document.

As to the remnant of the reset:

• The border: 0 is superflous as well. The <hr> and the most form input elements are the only elements which have a default border. Without it, the <hr> is invisible (actually, this fails in IE6/7) and the text input elements on a form with same background color are invisible as well.

• The outline should certainly not be resetted, it breaks accessibility. You need to control it yourself, e.g. resetting it yourself on only links with a (background) image since that's the major reason to reset it. But still, it breaks accessibility. Rather consider giving it a different outline color or style so that it is still visible, but less disturbing.

• The font-size: 100% would force you to redefine them yourself in the <h1>, <h2>, etc elements. But even without the reset, you would often already like to do that anyway. What's the point of this reset then?

• The vertical-align: baseline; breaks alignment of <sub> and <sup> so that they look like <small>. Further the table headers may also be affected. Those defaults to middle in all browsers. You would need to redefine them yourself again. Plus, it is known that this reset may cause IE6/7 to go havoc with images.

• The value of background: transparent; is unclear to me. I don't see any point of this reset expect that it may make IE6/7 mad. You would also need to redefine the background color for all form input elements yourself again which just adds more work (for the case they're placed in a colored container). I am sure that whenever you encounter an element which needs transparent background, you could easily spot that yourself and set it yourself.

Enfin, see what you do with this information. I don't stop you from using the CSS reset. I myself have found the CSS reset only useful >10 years back when I was just starting with HTML/CSS. But with years and years, I've learnt as well that this is plain nonsense. But I admit, it's useful for starters since the reset will force them to set the margins and other stuff themselves explicitly. Which you could do as good without the reset.

这篇关于是边距和填充最不平衡的事情在所有浏览器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！