要素幅がoffsetWidthと一致しないのはなぜですか？

nativeElement.offsetWidthを使用して要素幅を取得しようとしましたが、実際の幅よりも2.5px小さいです。私は何が欠けているのだろうかと思いましたか？要素幅がoffsetWidthと一致しないのはなぜですか？

私はDOMを検査し、どこ2.5pxが、私はどこでもそれを見つけるカント見つけようとしてみました：たとえば

export class AppComponent implements OnInit { 
    @ViewChild('sidebarSection') sectionContainer:ElementRef; 

    getNavbarWidth(){ 
     return this.sectionContainer.nativeElement.offsetWidth;   
    } 
} 


<body> 
<div class='wrapper'> 
    <div class='row'> 
     <div class='cell col s3'> 
      <div #sidebarSection> 
       <nav-menu></nav-menu> 
      </div> 
     </div> 
     <div class="cell col s9"> 
      <section Id='main'> 
       <router-outlet> 
        ... 
       </router-outlet> 
      </section> 
     </div> 
    </div> 
</div>

を、devtoolにそれは329.5px示したがoffsetWidthは327pxを返します。

.main-nav { 
    box-sizing: border-box; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 1; 
} 

.navbar-nav > li > a { 
    color: wh 
} 

@media (min-width: 768px) { 
    /* On small screens, convert the nav menu to a vertical sidebar */ 
    .main-nav { 
     background-color: #56004e; 
     height: 100%; 
     width: calc(25% - 20px); 
    } 
    .navbar { 
     background-color: #56004e; 
     border-radius: 0px; 
     border-width: 0px; 
     height: 100%; 
     margin-bottom: 0px; 
    } 
    .navbar-header { 
     float: none; 
    } 
    .navbar-collapse { 
     border-top: 1px solid #444; 
     padding: 0px; 
    } 
}

出典

2017-09-06 user3327729

私たちはこれにいくつかのCSSコードを取得できますか？ – Bellian

ボーダー、パディング、マージンのチェック – godblessstrawberry

通常、エレメントのオフセット幅は、エレメントのボーダー、エレメントの水平パディング、要素の垂直スクロールバー（レンダリングされている場合）、エレメントCSSの幅を含む測定値です。 https://stackoverflow.com/questions/8133146/difference-between-style-width-and-offsetwidth-in-html – Milad

html { 
 
    box-sizing: border-box; 
 
} 
 
*, *:before, *:after { 
 
    box-sizing: inherit; 
 
}

注：あなたは必ずそれはそのような問題を解決する必要があるcssリセットを使用していない場合。

出典

2017-09-06 09:44:48

それは本当にそれを解決しませんでした。ありがとう – user3327729

要素幅がoffsetWidthと一致しないのはなぜですか？

答えて

関連する問題