Warm tip: This article is reproduced from serverfault.com, please click

html-div中的p标签会影响相邻div的位置

(html - p tag within a div affecting the adjacent div's position)

发布于 2020-11-27 15:38:06

.navi { 
  width: 100%; 
  height: 100px; 
  background-color: red; 
} 

.navi-item { 
  width: 50px; 
  height: inherit; 
  background: blue; 
  display: inline-block; 
  margin-left: 10px; 
 }
<div class="navi">
  <div class="navi-item">
    <div>logo</div>
  </div>
  <div class="navi-item">`enter code here`
    <p class="p-tag">Home</p>
  </div>
</div>

添加p标签后,徽标div会被下推。但是当标记代替

标签效果很好。

Questioner
Mahesh Guduru
Viewed
11
verunar 2020-11-28 00:01:31

HTML元素(如段落)具有默认的css值,可能会影响某些元素。在这种情况下,p具有来自浏览器的以下css-

  • 明确:两者
  • 底边距:1em

在这种情况下,我建议你尝试添加<span>而不是添加<p>,看看是否会有任何更改。从你的代码示例,它看起来像“家”将是一个链接,无论如何,在那里你会用<a><p>