Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Top & Left vs margin-top & margin-left

Tags:

html

css

layout

What is the difference between using top and left properties and top and left margins?

I know top and left are usually used in position:absolute situation but I'm still wondering if there is any major difference.

ex:

position:absolute;
top:5px;
left:5px;

-vs-

margin-top:5px;
margin-left:5px;
like image 289
Louis Avatar asked Jun 21 '11 01:06

Louis


People also ask

What does TOP mean Singapore?

Temporary Occupation Permit (TOP) property meaning The Temporary Occupation Permit for TOP is given to developers who have not yet attained the CSC, but units in the estate are already safe for residences to move in. The TOP allows residents to move into the development before the remaining amenities are completed.

What is top condo?

What is a TOP? In Singapore real estate, the Temporary Occupation Permit or TOP is a permit that allows homeowners to move in and occupy the condominium, apartment or building temporarily as long as key requirements are met.

What does TOP mean in building?

Temporary Occupation Permit(TOP) is a temporary permit to allow owner to occupy the building when the key regulatory requirements are met as it may take some time to obtain the Certificate of Statutory Completion(CSC).

What does top stand for BTO?

Application For Occupation Of Building Works - TOP. General. When the building works are completed, the applicant and the Qualified Person shall apply to the Commissioner of Building Control for a Certificate of Statutory Completion (CSC) or a Temporary Occupation Permit (TOP).


2 Answers

Well, the main difference is that absolutely positioned elements are pulled out of the content flow.

But also with relatively positioned elements, the surrounding content may become obfuscated.

Margins on the other hand are added to the element's size while the surrounding content flows accordingly.

See this sample fiddle with some differences.

Surely there are situations where both deliver the same results, but under normal conditions, these two aproaches aren't simply exchangeable nor comparable.

like image 74
NGLN Avatar answered Oct 16 '22 07:10

NGLN


A There's a semantic difference. Box offsets like top specify how far a box's margin edge (dotted edges in the image below) is offset from a reference edge (For absolutely positioned elements, that's the top edge of the box's containing block). Margin properties like margin-top specify the width of the margin area of a box (The distance TM between the dotted edge and and solid edge in the image below).

Box model

B top and left apply only to positioned elements (elements with position set to anything other than static) while margin-top and margin-left apply to all elements except elements with table display types other than table-caption, table and inline-table.

like image 32
melhosseiny Avatar answered Oct 16 '22 07:10

melhosseiny