Apply a negative margin to allow a control to overflow its container's boundaries, and consume white space between controls.

When composing controls using balanced whitespace, it is sometimes desirable to extend a control into the whitespace. For example, this can move a scroll bar adjacent to the window edge, or align items in a list with other elements of the container.


To preserve the benefits of balanced whitespace, avoid setting margins or padding on containers. Instead, set a negative margin on the control that should extend beyond the container's border.


The user control allows the child to extend beyond its borders.

The control consumes the whitespace between itself and its neighbor.


The user control assigns a negative margin to the edge that should overlap. Knowing that the standard whitespace for this application is 12, the user control changes the positive 6 right margin to a negative 6 to align the list box scroll bar with the window's edge. Since there is a one-pixel border around the scrollbar, it makes it -7 to reach the edge.


The user control also assigns a zero right border to align the items in the list with other elements on the page. And it sets the border to 0 to hide the chrome. This allows the whitespace -- not a visible line -- to deliniate the controls. If the border were visible, the overflow would be obvious.