CODEWITHSUNDEEP
htmlcss
Mahesh Guduru
Mahesh Guduru

Reputation: 23

p tag within a div affecting the adjacent div's position

.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>

The logo div gets pushed down when p-tag is added. But when tag in place of

tag is doing fine.

Upvotes: 0

Views: 113

Answers (2)

verunar
verunar

Reputation: 874

HTML elements such as paragraph have default css values that might have an effect on some elements. In this case p has following css from browser -

  • clear: both
  • margin-bottom: 1em

in this case i would suggest you try to add <span> instead of <p> and see if there will be any change. From your code example, it looks like 'Home' will be a link anyway, where you would use <a> not <p>

Upvotes: 1

zerbene
zerbene

Reputation: 1492

You just need to add display: flex in .navi

.navi {
  width: 100%;
  height: 100px;
  background-color: red;
  display: flex; /*add*/
}

.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>

Upvotes: 0

Related Questions