Everything in CSS has a box around it, and understanding these boxes is key lớn being able to create layouts with CSS, or lớn align items with other items. In this lesson, we will take a proper look at the CSS Box Model so that you can build more complex layout tasks with an understanding of how it works and the terminology that relates to lớn it.
Bạn đang xem: Đường kẻ dọc trong html
Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.) |
to lớn learn about the CSS Box Model, what makes up the box mã sản phẩm and how lớn switch lớn the alternate model. |
Block & inline boxes
In CSS we broadly have two types of boxes — block boxes và inline boxes. These characteristics refer lớn how the box behaves in terms of page flow and in relation to other boxes on the page. Boxes also have an inner display type và an outer display type. First, we will explain what we mean by block box & inline box. We will then explain what is meant by an inner và outer display type.
If a box has an outer display type of block, it will behave in the following ways:
The box will break onto a new line. The box will extend in the inline direction lớn fill the space available in its container. In most cases this means that the box will become as wide as its container, filling up 100% of the space available. Padding, margin và border will cause other elements lớn be pushed away from the boxSome HTML elements, such as and , use block as their outer display type by default.
If a box has an outer display type of inline, then:
The box will not break onto a new line. Vertical padding, margins, & borders will apply but will not cause other inline boxes to lớn move away from the box. Horizontal padding, margins, & borders will apply và will cause other inline boxes khổng lồ move away from the box.Some HTML elements, such as , , và use inline as their outer display type by default.
The type of box applied khổng lồ an element is defined by display property values such as block & inline, & relates khổng lồ the outer value of display.
Aside: Inner và outer display types
At this point, we"d better also explain inner & outer display types. As mentioned above, boxes in CSS have an outer display type, which details whether the box is block or inline.
Boxes also have an inner display type, however, which dictates how elements inside that box are laid out. By default, the elements inside a box are laid out in normal flow, which means that they behave just like any other block và inline elements (as explained above).
We can, however, change the inner display type by using display values lượt thích flex. If we mix display: flex; on an element, the outer display type is block, but the inner display type is changed lớn flex. Any direct children of this box will become flex items và will be laid out according to the rules set out in the Flexbox spec, which you"ll learn about later on.
Note: to read more about the values of display, and how boxes work in block và inline layout, take a look at the MDN guide lớn Block & Inline Layout.
When you move on to lớn learn about CSS Layout in more detail, you will encounter flex, và various other inner values that your boxes can have, for example grid.
Block và inline layout, however, is the mặc định way that things on the website behave — as we said above, it is sometimes referred to lớn as normal flow, because without any other instruction, our boxes lay out as block or inline boxes.
Examples of different display types
Let"s move on & have a look at some examples. Below we have three different HTML elements, all of which have an outer display type of block. The first is a paragraph, which has a border added in CSS. The browser renders this as a block box, so the paragraph begins on a new line, & expands khổng lồ the full width available khổng lồ it.
The second is a list, which is laid out using display: flex. This establishes flex layout for the items inside the container, however, the danh sách itself is a block box and — like the paragraph — expands khổng lồ the full container width và breaks onto a new line.
Below this, we have a block-level paragraph, inside which are two elements. These elements would normally be inline, however, one of the elements has a class of block, và we have mix it to lớn display: block.
We can see how inline elements behave in this next example. The elements in the first paragraph are inline by default & so vị not force line breaks.
We also have a element which is set to display: inline-flex, creating an inline box around some flex items.
Finally, we have two paragraphs both set khổng lồ display: inline. The inline flex container and paragraphs all run together on one line rather than breaking onto new lines as they would do if they were displaying as block-level elements.
In the example, you can change display: inline khổng lồ display: block or display: inline-flex to lớn display: flex lớn toggle between these display modes.
You will encounter things lượt thích flex layout later in these lessons; the key thing lớn remember for now is that changing the value of the display property can change whether the outer display type of a box is block or inline, which changes the way it displays alongside other elements in the layout.
In the rest of the lesson, we will concentrate on the outer display type.
What is the CSS box model?
The CSS box model as a whole applies lớn block boxes. Inline boxes use just some of the behavior defined in the box model. The model defines how the different parts of a box — margin, border, padding, and nội dung — work together to create a box that you can see on a page. To địa chỉ cửa hàng some additional complexity, there is a standard and an alternate box model.
Parts of a box
Making up a block box in CSS we have the:
The below diagram shows these layers:
The standard CSS box model
In the standard box model, if you give a box a width and a height attribute, this defines the width và height of the content box. Any padding và border is then added to lớn that width & height to lớn get the total kích cỡ taken up by the box. This is shown in the image below.
If we assume that a box has the following CSS defining width, height, margin, border, và padding:
.box width: 350px; height: 150px; margin: 10px; padding: 25px; border: 5px solid black;
The actual space taken up by the box will be 410px wide (350 + 25 + 25 + 5 + 5) và 210px high (150 + 25 + 25 + 5 + 5).
Note: The margin is not counted towards the actual form size of the box — sure, it affects the total space that the box will take up on the page, but only the space outside the box. The box"s area stops at the border — it does not extend into the margin.
The alternative CSS box model
You might think it is rather inconvenient lớn have to địa chỉ up the border & padding lớn get the real form size of the box, và you would be right! For this reason, CSS had an alternative box model introduced some time after the standard box model. Using this model, any width is the width of the visible box on the page, therefore the content area width is that width minus the width for the padding & border. The same CSS as used above would give the below result (width = 350px, height = 150px).
By default, browsers use the standard box model. If you want khổng lồ turn on the alternative model for an element, you vày so by setting box-sizing: border-box on it. By doing this, you are telling the browser khổng lồ use the border box, as shown above, as your defined area.
.box box-sizing: border-box;
If you want all of your elements to use the alternative box model, và this is a common choice among baoveangiang.coms, phối the box-sizing property on the element, then phối all other elements khổng lồ inherit that value, as seen in the snippet below. If you want lớn understand the thinking behind this, see the CSS Tricks article on box-sizing.
html box-sizing: border-box;*, *::before, *::after box-sizing: inherit;
Note: An interesting bit of history — mạng internet Explorer used to mặc định to the alternative box model, with no mechanism available to switch.
Xem thêm: Cô Dâu 8 Tuổi Phần 3 Tập 61, Tag Co Dau 8 Tuoi Phan 7 Tap 61
Playing with box models
In the below example, you can see two boxes. Both have a class of .box, which gives them the same width, height, margin, border, and padding. The only difference is that the second box has been set khổng lồ use the alternative box model.
Can you change the size of the second box (by adding CSS khổng lồ the .alternate class) to make it match the first box in width and height?
Note: You can find a solution for this task here.
Use browser DevTools to lớn view the box model
Your browser baoveangiang.com tools can make understanding the box mã sản phẩm far easier. If you inspect an element in Firefox"s DevTools, you can see the kích thước of the element plus its margin, padding, và border. Inspecting an element in this way is a great way khổng lồ find out if your box is really the size you think it is!
Margins, padding, và borders
You"ve already seen the margin, padding, và border properties at work in the example above. The properties used in that example are shorthands and allow us khổng lồ set all four sides of the box at once. These shorthands also have equivalent longhand properties, which allow control over the different sides of the box individually.
Let"s explore these properties in more detail.
Margin
The margin is an invisible space around your box. It pushes other elements away from the box. Margins can have positive or negative values. Setting a negative margin on one side of your box can cause it lớn overlap other things on the page. Whether you are using the standard or alternative box model, the margin is always added after the form size of the visible box has been calculated.
We can control all margins of an element at once using the margin property, or each side individually using the equivalent longhand properties:
In the example below, try changing the margin values to see how the box is pushed around due to the margin creating or removing space (if it is a negative margin) between this element & the containing element.
Margin collapsingA key thing to understand about margins is the concept of margin collapsing. If you have two elements whose margins touch, và both margins are positive, those margins will combine to become one margin, và its size will be equal khổng lồ the largest individual margin. If one margin is negative, its value will be subtracted from the total. Where both are negative, the margins will collapse và the smallest (furthest from zero) value will be used.
In the example below, we have two paragraphs. The top paragraph has a margin-bottom of 50 pixels. The second paragraph has a margin-top of 30 pixels. The margins have collapsed together so the actual margin between the boxes is 50 pixels and not the total of the two margins.
You can test this by setting the margin-top of paragraph two to 0. The visible margin between the two paragraphs will not change — it retains the 50 pixels mix in the bottom-margin of paragraph one. If you phối it lớn -10px, you"ll see that the overall margin becomes 40px — it subtracts from the 50px.
There are a number of rules that dictate when margins do and do not collapse. For further information see the detailed page on mastering margin collapsing. The main thing lớn remember for now is that margin collapsing is a thing that happens. If you are creating space with margins và don"t get the space you expect, this is probably what is happening.
The border is drawn between the margin & the padding of a box. If you are using the standard box model, the size of the border is added lớn the width and height of the box. If you are using the alternative box model then the size of the border makes the content box smaller as it takes up some of that available width và height.
For styling borders, there are a large number of properties — there are four borders, và each border has a style, width, and màu sắc that we might want lớn manipulate.
You can set the width, style, or màu sắc of all four borders at once using the border property.
To set the propertiesof each side individually, you can use:
To phối the width, style, or color of all sides, use the following:
To mix the width, style, or màu sắc of a single side, you can use one of the more granular longhand properties:
In the example below, we have used various shorthands and longhands khổng lồ create borders. Have a play around with the different properties to kiểm tra that you understand how they work. The MDN pages for the border properties give you information about the different styles of border you can choose from.
The padding sits between the border and the content area. Unlike margins, you cannot have negative amounts of padding, so the value must be 0 or a positive value. Padding is typically used lớn push the nội dung away from the border. Any background applied lớn your element will display behind the padding.
We can control the padding on all sides of an element using the padding property, or on each side individually using the equivalent longhand properties:
If you change the values for padding on the class .box in the example below, you can see that this changes where the text begins in relation lớn the box.
You can also change the padding on the class .container, which will make space between the container & the box. Padding can be changed on any element, và will make space between its border and whatever is inside the element.
All of the above applies fully lớn block boxes. Some of the properties can apply to inline boxes too, such as those created by a element.
In the example below, we have a inside a paragraph & have applied a width, height, margin, border, and padding to it. You can see that the width and height are ignored. The vertical margin, padding, & border are respected but they vì not change the relationship of other content to our inline box and so the padding và border overlaps other words in the paragraph.Horizontal padding, margins, & borders are respectedand will cause other nội dung to move away from the box.
There is a special value of display, which provides a middle ground between inline & block. This is useful for situations where you bởi vì not want an thành tựu to break onto a new line, but vì want it lớn respect width and height and avoid the overlapping seen above.
An element with display: inline-block does a subset of the block things we already know about:
The width và height properties are respected. Padding, margin, và border will cause other elements to be pushed away from the box.It does not, however, break onto a new line, và will only become larger than its nội dung if you explicitly add width & height properties.
In this next example, we have added display: inline-block to our element. Try changing this to lớn display: block or removing the line completely lớn see the difference in display models.
Where this can be useful is when you want to give a links a larger hit area by adding padding. is an inline element like ; you can use display: inline-block to allow padding lớn be mix on it, making it easier for a user to click the link.
You see this fairly frequently in navigation bars. The navigation below is displayed in a row using flexbox and we have added padding lớn the element as we want to lớn be able to change the background-color when the is hovered. The padding appears lớn overlap the border on the element. This is because the is an inline element.
Add display: inline-block to the rule with the .links-list a selector, and you will see how it fixes this issue by causing the padding khổng lồ be respected by other elements.
We have covered a lot inthis article, but can you remember the most important information? You can find some further tests to verify that you"ve retained this information before you move on — see demo your skills: The Box Model.
That"s most of what you need to understand about the box model. You may want to return khổng lồ this lesson in the future if you ever find yourself confused about how big boxes are in your layout.
In the next lesson, we will take a look at how backgrounds & borders can be used to lớn make your plain boxes look more interesting.
Last modified: Oct 8, 2021, by MDN contributors
Change your languageSelect your preferred language English (US)EspañolFrançais日本語한국어Português (doBrasil)Русский中文 (简体) Change languageGetting started with the web Introduction lớn HTML Multimedia and embedding HTML tables CSS first steps CSS building blocks Styling text CSS layout JavaScript first steps JavaScript building blocks Introducing JavaScript objects Asynchronous JavaScript Client-side web APIs chip core forms learning pathway Advanced forms articles Accessibility guides Accessibility assessment Client-side web development tools Introduction lớn client-side frameworks React Ember Vue Svelte Angular Git và GitHub Cross browser testing First steps Django web framework (Python) Express web Framework (node.js/JavaScript) Common questions