html – CSS内联块维度差异

概述我有以下 HTML代码： <section class="container"> <div class="search"></div></section> 而这些CSS规则： *, *:before, *:after { box-sizing: border-box;}body, section, div { margin: 0; padding: 0;} 我有以下 HTML代码：

<section >    <div ></div></section>

而这些CSS规则：

*,*:before,*:after {    Box-sizing: border-Box;}body,section,div {    margin: 0;    padding: 0;}HTML,body { height: 100%; }.container {    display: inline-block;    position: relative;}.search {    display: inline-block;    padding: 3em;    border: 1px solID black;}

如果你检查section元素,你会发现它有5px的大小…我没有确定大小.我假设浏览器会根据孩子的大小自动计算.

为什么会这样？

解决方法 原因是因为您正在使用容器和搜索元素的内联块.这个想法是内联块将元素视为段落中的文本;这是内联的.因此,虽然元素本身是块元素,但浏览器会在元素之间添加一些空间,因为HTML实际上具有空格.就像在p标签中添加空格如何在单词之间放置空格一样,在两个内联块元素之间添加空格会在元素之间添加空格.

话虽这么说,有几种方法可以解决这个问题：

>最小化HTML.可能是最简单的方法.不要在代码中使用空格,只需将所有内容强制为一行,例如：< section class =“container”>< div class =“search”>< / div>< / section>. (警告：这是未经测试的.)
>添加负边距：这有点像黑客攻击,但你可以通过使用浏览器的inspect元素功能找出添加了多少空间,而不是使用负边距.也就是说,如果两个元素之间有4px的空间,则应用以下内容：margin：-4px;. (默认情况下,浏览器将在内联块元素之间应用4px的边距空间.)如果使用em或百分比,则可以使用响应式设计.
>使用别的东西.如果您正在尝试垂直对齐,那么内联块并不总是可行的方法.这是一个很好的资源：http://phrogz.net/css/vertical-align/.

总结

以上是内存溢出为你收集整理的html – CSS内联块维度差异全部内容，希望文章能够帮你解决html – CSS内联块维度差异所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。