position

default

reference element

target element

in a container with margins

reference element

target element

in a container with margins and padding

reference element

target element

with padding on the reference element

reference element

target element

with padding on the target element

reference element

target element

with margin on the reference element

reference element

target element

with margin on the target element

reference element

target element

with a <main> with margins

reference element

reference element (nested)

this one is on click demo enabled (1):

this one is on mousemove demo enabled (2):

target element (in body)

target element

target element

target element