[SalesForce] Pad white space at the top of an outputText

I want to try and push down some text that I have on a Visualforce page dashboard component. I have most of the style that I want but it won't seem to push down in the page. I've tried padding-top: 40px changing the px amount to different values and no success. Is there a way to push the text down in the style?

<apex:page controller="ISOGaugeControllerIndividualCurMo">
<!-- Use the rendered="" attribute to conditionally show the error if your {!max2} variable is 0 --> 
<apex:outputText    rendered="{!max2 == 0}" style="color:blue;font-size: 40px;font-weight: bold;align-content: center;margin-top: 40px"
                    value="No Records Available"/>

<!-- Now do the opposite side of this check within your chart's rendered="" attribute -->
<apex:chart height="180" width="400" animate="true" data="{!data}" legend="false"  rendered="{!max2 != 0}">
    <apex:axis type="Gauge" position="top" title="(In Thousands  $$$)" minimum="0" maximum="{!max2}" margin="-9"/>          
    <apex:gaugeSeries dataField="size" donut="50"/>
</apex:chart>

What it shows now:

enter image description here

What I want it to show:

enter image description here

Best Answer

A good tool to use when developing small Visualforce UIs is the HTML developer tools within your chosen browser which allows you to quickly and easily test out different css markup inline to help debug or figure out how to achieve the effect you want. This helps to make small css adjustments quickly without the save / refresh of your preview involved in testing iterative changes to the Visualforce page itself. Once you know what css is likely to work you can copy this over into your style or inline on the elements.

(The developer tools on chrome can be opened using alt + cmd + i on a mac or by right clicking on the element you want to see and hitting the inspect option)

I used the inspect tool to quickly see that the padding wasn't sitting correctly when applied to the <apex:outputText/> element. I made a slight modification to your code which i believe will achieve your desired outcome.

<apex:page >
<!-- Use the rendered="" attribute to conditionally show the error if your {!max2} variable is 0 --> 
<apex:outputText rendered="true">
    <div style="color:blue;font-size: 40px;font-weight: bold;align-content: center;margin-top: 40px">
        No Records Available
    </div>
</apex:outputText>
</apex:page>

Heres a quick screenshot showing the tools in action to see the styling and sizing of a particular element. Heres a quick screenshot showing the tools in action to see the styling and sizing of a particular element.

Related Topic