How to remove or modify a div tag using css when the div tag is not associated with any class or id-CodePudding

Hi I have the following html code and this is part of the html

<div >
  <div >
    <div >
      <div >
          <div id="dPopupBG" ></div>
          <div style="height:100px;"><div>
          <div id="MainContent"  style="display: none;">  
          <div  style="display:none"><span></span></div>
          <div id="MainDocContent" > 
             (and Here page content having more html details)
          </div>
      </div>
   </div>
  </div>
</div>

There is a more space between the header line and the MainDocContent. When I focus using inspect on the empty space then the inspect element is highlighted to below tag

  <div style="height:100px;"><div>

I tried the below css to adjust the height in the css file but the height is not getting modified

#dPopupBG div{height:80px}

I am trying to find the solution and learn in the process.

CodePudding user response：

In CSS you only can override an inline property by adding !important

#example div{
  height:80px;
  background-color:orange!important;
}

<div id="example"></div>
<div style="background-color:black;"><div>

CodePudding user response：

Override inline style is by using !important keyword With the CSS rule.

#dPopupBG   div
{
height:80px!important;
background:red;
}

<div >
  <div >
    <div >
      <div >
          <div id="dPopupBG" ></div>
          <div style="height:100px;"><div>
          <div id="MainContent"  style="display: none;">  
          <div  style="display:none"><span></span></div>
          <div id="MainDocContent" > 
             (and Here page content having more html details)
          </div>
      </div>
   </div>
  </div>
</div>