Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the difference between CSS margin and outline?

Tags:

css

Both margins and outline are used to add space around the border.

like image 954
user5402 Avatar asked Nov 02 '13 09:11

user5402


People also ask

What is CSS outline?

An outline is a line that is drawn around elements, outside the borders, to make the element "stand out".

What is the margin of CSS?

In CSS, a margin is the space around an element's border, while padding is the space between an element's border and the element's content. Put another way, the margin property controls the space outside an element, and the padding property controls the space inside an element.

Why do we use outline in CSS?

Outline is a line outside of the element's border. Unlike other areas of the box, outlines don't take up space, so they don't affect the layout of the document in any way.

What is the difference between margin padding and border?

In HTML margins work the same way in giving space away from the edge of the page. Borders simply wrap the element. A border can wrap immediately around an element, or it may look further away from an element if more padding has been applied to the element. Padding provides space around the element.


1 Answers

outline is just drawing an line around the border, without actually claiming space.

Here is a JSFiddle demonstrating both: http://jsfiddle.net/g8FXT/

like image 131
darthmaim Avatar answered Nov 15 '22 08:11

darthmaim