Html 什么'；使用内联块并向节点添加填充的正确输出是什么？_Html_Css

Html 什么'；使用内联块并向节点添加填充的正确输出是什么？

html css

Html 什么'；使用内联块并向节点添加填充的正确输出是什么？,html,css,Html,Css,我有下面的代码，我试图理解为什么所有的元素不在同一条线上。这是因为我添加了填充，但是在布局元素时不应该考虑填充吗？我查看了IE、Firefox和Chrome。它们都将最后一个元素放在下一行有人能解释一下为什么，以及我如何将所有元素放在同一行，并保持我在它们上的填充物吗谢谢 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text

我有下面的代码，我试图理解为什么所有的元素不在同一条线上。这是因为我添加了填充，但是在布局元素时不应该考虑填充吗？我查看了IE、Firefox和Chrome。它们都将最后一个元素放在下一行

有人能解释一下为什么，以及我如何将所有元素放在同一行，并保持我在它们上的填充物吗

谢谢

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.body{PADDING:0PX;MARGIN:0PX}
.bar{WIDTH:100%;HEIGHT:20PX;BACKGROUND-COLOR:#FFFFFF;}
.item{WIDTH:25%;HEIGHT:20PX;DISPLAY:INLINE-BLOCK;COLOR:#000000;PADDING:5PX;}
</style>
</head>

<body class="body">
<div id="menubar" class="bar">
   <div  class="item">B1</div>
   <div  class="item">B2</div>

   <div  class="item">B3</div>
   <div  class="item">B4</div>
</div> 
</body>
</html>

我得到的结果是：

B1 B2 B3
B4

您将四个项目中的每一项设置为25%宽度+10px水平填充。这意味着将有40px的宽度，这将导致第四个项目的包装

如果要在应用宽度的同一元素上使用填充，则需要使用百分比，如

width:23%；填充：5px1%。或者，您可以将填充应用于内部元素，以便项目上的唯一尺寸是宽度。
您将四个项目中的每一项设置为25%宽度+10px水平填充。这意味着将有40px的宽度，这将导致第四个项目的包装
如果要在应用宽度的同一元素上使用填充，则需要使用百分比，如width:23%；填充：5px1%。或者，您可以将填充应用于内部元素，以便项目上的唯一尺寸是宽度。
对于内联块
布局，除了您添加的任何填充之外，元素还受空白和垂直布局的影响。使用这种布局形式时，最好始终使用vertical align:top。这为您提供了一个始终如一的工作起点
inline block
的空白问题是，HTML中元素之间的任何空格都会像对待HTML中的文本一样被处理，并被压缩为单个空格。因此，除了您设置的任何填充或边距之外，您还需要处理这个空间。要去除它，您可以将元素组合在一起，或者注释掉空白
所以在你的例子中，除了25%之外，它还添加了空格和填充。最简单的修复方法是只将填充改为顶部和底部。因为你的设计是一个灵活的布局，你的左，右填充是另一种方式处理：通过它的伸展性。如果文本与左侧边框对接有问题，可以使用文本缩进：5px代替左侧填充：5px。它不影响布局
演示：
更改：
.item{宽度：25%；高度：20PX；显示：内联块；颜色：000000；填充：5PX；}

致：
.item{
颜色：#000000；
显示：内联块；
高度：20px；
填充：5px0 5px0；
文本缩进：5px；
宽度：25%；
}

下面是一个演示，演示了内联块
布局的问题以及如何处理这些问题
演示：
HTML:

一
二
对于内联块
布局，除了您添加的任何填充之外，元素还受空白和垂直布局的影响。使用这种布局形式时，最好始终使用vertical align:top。这为您提供了一个始终如一的工作起点
inline block
的空白问题是，HTML中元素之间的任何空格都会像对待HTML中的文本一样被处理，并被压缩为单个空格。因此，除了您设置的任何填充或边距之外，您还需要处理这个空间。要去除它，您可以将元素组合在一起，或者注释掉空白
所以在你的例子中，除了25%之外，它还添加了空格和填充。最简单的修复方法是只将填充改为顶部和底部。因为你的设计是一个灵活的布局，你的左，右填充是另一种方式处理：通过它的伸展性。如果文本与左侧边框对接有问题，可以使用文本缩进：5px代替左侧填充：5px。它不影响布局
演示：
更改：
.item{宽度：25%；高度：20PX；显示：内联块；颜色：000000；填充：5PX；}

致：
.item{
颜色：#000000；
显示：内联块；
高度：20px；
填充：5px0 5px0；
文本缩进：5px；
宽度：25%；
}

下面是一个演示，演示了内联块
布局的问题以及如何处理这些问题
演示：
HTML:

一
二
CSS中的宽度
和高度
应用于内容框
（在填充/边框/边距内）。因此，当您设置宽度
和填充
时，元素的总宽度将计算为宽度
+左填充
+右填充
。要克服此问题，您可以相应地调整宽度
，或者将CSS3的框大小
属性设置为边框框
。这使得宽度包括填充
和边框
，因此不受更改填充
或边框
值的影响。但是，margin
属性仍然会影响总宽度
要修复此问题，请将其添加到CSS中：
.item {
 box-sizing:border-box;
}

有关详细信息，请参阅
注意：您可能需要浏览器前缀才能在某些浏览器中使用，而在其他浏览器中可能根本不起作用。请务必首先测试它是否符合您的需要。
宽度和高度在CSS中应用于内容框（在填充/边框/边距内）。因此，当您设置宽度
和填充
时，元素的总宽度将计算为宽度
+左填充
+右填充
。要克服此问题，您可以调整宽度
.item {
 box-sizing:border-box;
}

#menubar a{display: block; padding: 5px}