Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
ibrahim Warsame
7,803 PointsThe display property and the box model.
Can anyone explain to me, why whether an html element is displayed like a block element or inline element has somethig to do with the box model, and what exactly is the box model.
2 Answers
Lewis Brookes
5,717 PointsHi Ibrahim,
The box model is basically like layers. All elements use it. For example if you took a <p> tag and typed something in this would be your content which is in the center of your box.
Then the next layer is padding which you can assign a top, bottom, left or right value using the padding property in CSS. Padding creates space around your content.
Example padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px;
padding: 10px (This is shorthand for all of the above and will assign 10px of space all around your content)
After padding comes the border where you create a border around the content and padding elements, the properties which you can affect are the style of the border, the width of the border and the color of the border.
Example border-style: solid; border-width: 10px; border-color: #000; (This can all be shortened to: border: 10px solid #000;)
Then after border comes the margin layer of the box model which creates space around the element including the border.
A diagram of the box model can be fond here: https://www.w3schools.com/css/css_boxmodel
I hope this helps.
Muhammad Javed
3,979 PointsHi ibrahim Warsame,
Every Html property has a default behavior when used, thus some elements show either block or inline. The easy way to grasp the concept is when the element creates space before and after it, sorta of empty lines, that means the elements property is blocked and when there's no space before and after the element it's inline with the rest of content such as <a links etc .
Furthermore, box model is a concept looking those elements in sort of a box or rectangle on the page. With the help of box model we can arrange those elements display type.
Hope this helps, check the video on box-model to learn more about it.