When should I use Paddings, Borders, and Margins?

Question

Could someone explain to me the whole box model concept. And, maybe even show me a good example of a website or code that shows a good use of how they work.

Answer 1

Lets say every html object has a box in which it is displayed, eg. text is inside a box, images are inside boxes etc...
Margin sets how far away the box itself is going to be from anything else(any other object in the document)
Padding sets how far away the object is going to be from the box border
Border sets the border parameters such as color, radius and size(thickness).

Let's say we have a <p> object to which we've set a background color of blue...
Margin would move the entire blue box away from other objects, while the text stays on the very edge of it.
Padding would move the text a bit away from the border, leaving some space between the text and the border-a blue padding.
Border-radius would make the edges softer, size would display the line around the box/border (thickness set in px or em) and border-color, you guessed it, would set the color of the border line

Hope this helps :)
And if not, just mess around with theese parameters in css and you'll figure it out soon enough ;)

Answer 2

my suggestion go to any website and right click and select inspect u will learn a lot from it
lot more than from any other method

Answer 3

content= is the element itself may be paragraph

padding= is the space between the content and the border, that is not until u set it

border= is the line area that cover the ((padding, the space and the content =(inside area of border))

margin = is the invisible area that corvers the border, the padding, the content. ((out-side the border))

Answer 4

The whole point of them is to improve spacing between parts of your website. Instead of being all clumped together in one area, you start to get whitespace that is more pleasing to look at. all websites use it if you inspect element in chrome and click on an element to view the CSS of it :)

Answer 5

you need to calculate the spaces and work with % instead of pixels, to help the responsive

Answer 6

Currently, I'm a novice Web builder who is practicing coding, and following along with the website our high school teacher gave us I'm understanding it.
But when I got to the box model, I wondered about whether I needed to apply values to them in every case or to just add values here and there.
Your comment is very insightful however, thanks!

Answer 7

Yeah there is never arbitrary values that fit into these areas. You will get a feel for how much spacing there needs to be as you write it. Sometimes you will feel there doesn't need to be much, just make sure the text doesn't blend in with the border! :)

Answer 8

@Duperoy Dieuseul
● Thanks Duperoy, in the past few weeks, about a month now, I have come to grasp and understand the box model concept as well as how it works concerning paddings, borders, margins, and even outlines that surround the overall content of a Web Page.
● However, now I am just traveling on the road of trying to understand when, where, and if I need them when make a Web Site from scratch. Although I have come to understand also that I not a bad programmer just because I can not think off the top of my head about what paddings, borders, margins, outlines or other CSS and HTML properties to use.
● It's all about how you want the layout and design of your page to be. Even the best Web Developers spend atleast a month and/or even months working a "decent" Web Site.
● Nonetheless, drawing back to the information you gave to me about the box model, thank you so very much!

Answer 9

A way I taught myself to understand the box model is by putting a solid black 2px border around elements. I then a rough idea to work with that showed me the padding and margins for elements. It really came in handy when I would float elements.

Answer 10

Is there any possible way to auto format it somehow. I know you can have...

margin: auto;
border: 0;
padding: 0;

Like if I leave it without adding anything to the margin, border, or padding it looks fine. But setting the border and padding to 0 makes the webpage look funny.

Answer 11

@ be raimondo
● Well see I actually do not using absolute units like px at all. When I code I use relative units such as em pretty much 96% of the time.
● I came to know HTML and CSS (currently trying to learn Javascript) really well. Although, I still can not think of a good Paddings, Borders, Margins, and/or even Outlines when making a fresh Web Page.
● I suppose it will come with time.

Answer 12

@KosT
● Haha, True story KosT. In the past month or so of learning HTML, CSS, and some Javascript I have learned how to apply paddings, borders, margins, and even outlines. All just by making websites for fun really... playing and seeing how things work.
● Even so, I find that I have trouble in deciding when, where, why, and if I need paddings, borders, margins, and outlines when making a Web Site from scratch.
● I guess that being relatively new to Web Development I thought that the "good" and/or "best" Web Developers (or those who create & design Web Sites) were those who knew the in & outs of what every tag, property, element, or code does by heart with the exception of a few. Thus, they are able to build the HTML along with the CSS right off the top of their head fairly easily.
● But, I have come to understand that is not true anyways.