CSS - The box model

The "CSS box model" is a set of rules that determine the dimensions of every element in a web page. It gives each box four properties:

1- Width and height — specifies the width and height of the content area. 2- Padding — specifies the amount of space between the content area and the border. 3- Border — specifies the thickness and style of the border surrounding the content area and padding. 4- Margin — specifies the amount of space between the border and the outside edge of the element.

You can modify the corners of an element's border box with

border-radius property

The space between the contents of a box and the borders of a box is known as padding. In CSS, you can modify the space between content area and border with

padding property with px unit which will affect on all four sides.

The default border is medium none color, where color is the current color of the element. If width, style, or color are not set in the CSS file, the web browser assigns the default value for that property.

true

The overflow property controls what happens to content that spills, or overflows, outside its box. It can be set to one of the following values:

1- hidden - when set to this value, any content that overflows will be hidden from view. 2- scroll - when set to this value, a scrollbar will be added to the element's box so that the rest of the content can be viewed by scrolling. 3- visible - when set to this value, the overflow content will be displayed outside of the containing element. Note, this is the default value.

If you want to be more specific about the amount of padding on each side of a box's content, you can use the following properties:

1- padding-top 2-padding-right 3-padding-bottom 4-padding-left

In CSS, the border property's value requires three parts

1- width — The thickness of the border. A border's thickness can be set in pixels or with one of the following keywords: thin, medium, or thick. 2- style — The design of the border. Web browsers can render any of 10 different styles. Some of these styles include: none, dotted, and solid. 3- color — The color of the border. Web browsers can render colors using a few different formats, including 140 built-in color keywords.

The box model

All elements on a web page are interpreted by the browser as "living" inside of a box. This is what is meant by the box model.

Elements can be hidden from view with the visibility property.

The visibility property can be set to one of the following values: 1- hidden — hides an element. 2- visible — displays an element.

Horizontal margins (left and right), like padding, are always displayed and added together. For example, if two divs with ids #div-one and #div-two, are next to each other, they will be as far apart as the sum of their adjacent margins.

Unlike horizontal margins, vertical margins do not add. Instead, the larger of the two vertical margins sets the distance between adjacent elements.

The margin property also lets you center content horizontally with auto property. However, you must follow a few syntax requirements.

div { margin: 0 auto; } margin: 0 auto; will center the divs in their containing elements. The 0 sets the top and bottom margins to 0 pixels. The auto value instructs the browser to adjust the left and right margins until the element is centered within its containing element.

All major web browsers have a default stylesheet they use in the absence of an external stylesheet. User agent stylesheets often have default CSS rules that set default values for padding and margin. This affects how the browser displays HTML elements, which can make it difficult for a developer to design or style a web page.

it's good practice to reset these default values so that you can truly work with a clean slate.

Because a web page can be viewed through displays of differing screen size, the content on the web page can suffer from those changes in size. To avoid this problem, CSS offers two properties that can limit how narrow or how wide an element's box can be sized to.

min-width — this property ensures a minimum width of an element's box. max-width — this property ensures a maximum width of an element's box. or min-height — this property ensures a minimum height for an element's box. max-height — this property ensures a maximum height of an element's box.

if the top and bottom values for padding will equal each other, and the left and right values for padding will also equal each other, you can use the following shortcut:

padding: 5px 10px;

We can set the margin of an element using

the margin property where if the value if one affects all four sides of the element is we can of course use the short hand way of assigning each side single handedly or in one sequence.

An element's content has two dimensions: a height and a width. By default, the dimensions of an HTML box are set to hold the raw contents of the box. The CSS height and width properties can be used to modify these default dimensions.

true

This means that other HTML elements on the page cannot come within specified pixels of the paragraph's border.

true

When you set the left and right margin of a block-level element to auto, it will center the block in its parent element. Note that this only works on blocks that have an explicit width defined on them. Remove that width: 200px line, and our button will be the full width of the browser, making "center alignment" meaningless.

true

Another implementation of the padding property lets you specify exactly how much padding there should be on each side of the content in a single declaration with four values.

where each value correspond to the amount of padding in a clockwise rotation. top, right, bottom, and left.