Validator controls taking up space in Asp.Net

If you are using the built-in ASP.net Validation Controls such as the RequiredFieldValidator or the RegularExpressionValidator to validate user input, as you should be, you may have notices that in your UI even though they are not active (hidden) they are still taking up space in your layout and may be throwing things off.
It turns out that the Validation Controls in ASP.net  have an attribute you can add to their markup called ‘Display’. By default if you do not add and set this attribute in your control’s markup it will default to ‘Static’. There are 2 other options available to you ‘None’ and ‘Dynamic’. It is due to the ‘Static’ option that you are seeing it take up space even when it is not active.
To fix the problem set the ‘Display’ attribute in the control’s markup to the ‘Dynamic’ value and poof, the space is no longer taken up when inactive and is dynamically added when active.
Here is what each option actually does to the Validator’s HTML markup when set.

Static (Default): Causes the required space for the error message to be taken up in the UI’s HTML no matter if it is inactive or active.

<span style="color: Red; visibility: hidden;">Invalid</span>

Dynamic: Causing the element to not display at all, but when activated the space needed to display the error is reclaimed and UI elements are shifted to make room. 

<span style="color: Red; display: none;">Invalid</span>

None: Causing the element to not display at all even when activated, the error message still displays in a Validation Summary if provided but nothing will appear in the UI where the Validator was originally positioned.

<span style="color: Red; display: none;"></span>