Member Avatar for vedro-compota

Hi mates))
Please tell me - is div-block displacement by margin-top, margin-left...etc equivalent to div-block displacement by top= left= ....etc? (I mean - for relative-placed blocks)
Thanks for your answers!))

  • 2 Contributors
  • 4 Replies
  • 94 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Arkinder

Dani AI

Generated

Short answer for : not equivalent.

was pointing in the right direction but there are a few useful distinctions to add. When an element stays in the document flow and you change its margins you are changing the layout itself: neighbouring boxes are reflowed and vertical margins can collapse with adjacent blocks. By contrast, moving a relatively positioned element is a visual offset applied after layout; the element keeps its original slot in the flow and siblings are not moved. For the formal definitions see the CSS position rules and how the normal flow is handled (position on MDN).

For out-of-flow elements (absolute/fixed) the situation differs again: those boxes are removed from the normal flow and placed relative to their containing block. Margins still apply to those boxes but they do not participate in margin collapsing the way in-flow blocks do, and offsets are resolved according to the positioning rules rather than simply adding to margins. That is why you can get overlaps or unexpected distances if you mix offsets and margins without checking the computed position (margin on MDN).

Practical rules: use margins for spacing that should affect surrounding content; use positioning offsets or transforms for visual nudges and controlled overlap. For animations and smooth moves prefer transform (translate) because it avoids reflow and is more performant (transform on MDN). When debugging, toggle position in DevTools, inspect computed values, and temporarily add outlines (not margins) to see the box that the layout is reserving.

Recommended Answers

All 4 Replies

Member Avatar for Arkinder

Visually yes, but no. Margin is part of the box model, while the top and left properties interact with elements a little differently, and typically require the element to be removed from the normal flow of the page.

relative-placed blocks? Do you mean relatively positioned block level elements?


Regards, Arkinder

commented: +++++++++ +1
Member Avatar for vedro-compota

Do you mean relatively positioned block level elements?

yes)

Member Avatar for vedro-compota

What the difference between them respect to normal flow?))

Member Avatar for Arkinder

For example: if you positioned an element absolutely, you can either use top or margin-top . They do not stack.

Regards, Arkinder

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.