Classic向けVisualforceページを開発したときに見た目で気になる部分がでてくると思います。周りの余白部分です。
Salesforce標準スタイルが適用されるためなので仕方がない部分ですが、SLDSを適用するような画面ではできれば余白を無くしたくなると思います。
そんなときは下記スタイルを読み込ませれば回避できそうです。
<style>
.noSidebarCell, .sidebarCell .fixed {
padding: 0 !important;
}
</style>
これで周りの余白を無くしスッキリしたデザインにすることができました。
サンプルコード
<apex:page showHeader="true" sidebar="false" id="page">
<!-- Lightning Design System -->
<apex:slds />
<style>
.noSidebarCell, .sidebarCell .fixed {
padding: 0 !important;
}
</style>
<!-- App -->
<div xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="vf-page">
<div class="slds-page-header">
<div class="slds-grid">
<div class="slds-col slds-has-flexi-truncate">
<div class="slds-media slds-no-space slds-grow">
<div class="slds-media__figure">
<svg class="slds-icon slds-icon-standard-user" aria-hidden="true">
<use xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/standard-sprite/svg/symbols.svg#user')}"></use>
</svg>
</div>
<div class="slds-media__body">
<p class="slds-text-title--caps slds-line-height--reset">Record Type</p>
<h1 class="slds-page-header__title slds-m-right--small slds-align-middle slds-truncate" title="this should match the Record Title">Record Title</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</apex:page>