在此示例中如何呈现轮廓，边框和填充的技术说明? [英] Technical explanation of how outline, border and padding are rendered in this example?
问题描述
我正在学习css，并且正在努力理解为什么html如此呈现:
I'm learning css and was struggling to understand why the html is rendering like so:
我能理解为什么红色边框从顶部和左侧被切除.这是因为轮廓线是在框外绘制的，因此不会占用空间: https://developer.mozilla.org/en/CSS/outline .在此示例中，它们被绘制在< body> 元素之外.
I can understand why the the red border is being cut off from the top and left. It's because outlines don't take up space since they're drawn outside of the box: https://developer.mozilla.org/en/CSS/outline. In this example they're being drawn outside of the <body> element.
-
但是，我对为什么边界被切断而感到困惑最佳.有什么想法吗?
However I was confused as to why border is being cut off from the top. Any ideas?
什么CSS可以应用于< span> 元素以构成整个轮廓和边框显示?
What css can be applied to the <span> element to make the entire
outline and border display?
此外，是否曾经认为可以将内联元素放在旁边像< span> somestuff</span>< div> somecontent</div> ?
Also, is it ever considered okay to place an inline element next to
a block element like <span>somestuff</span><div>somecontent</div>?
推荐答案
要点1:
如果添加 float:left 或 display:block ，则此框将正确显示.这是因为span是一个内联元素.
If you add a float:left or a display:block, the box will render correctly. This is because span is an inline element.
要点2:
添加以下内容:
margin:10px 0 0 10px;
float:left;
要点3:您可以根据设计需要在块元素旁边放置一个内联元素.您还可以通过设置 display:block 或 display:inline-block 或任何其他允许的显示值来更改内联元素的显示样式.
Point 3:
You can place an inline element next to a block element as the design requires. You can also change the display style of the inline element by setting display:block or display:inline-block or any of the other display values allowed.
这篇关于在此示例中如何呈现轮廓，边框和填充的技术说明?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
