Box Model Tutorial

CSS box model

The CSS box model module defines the rectangular boxes, including their padding and margin, that are generated for elements and laid out according to the visual formatting model.

Box model overview

A box in CSS consists of a content area, which is where any text, images, or other HTML elements are displayed. This is optionally surrounded by padding, a border, and a margin, on one or more sides. The box model describes how these elements work together to create a box as displayed by CSS. To learn more about it read Introduction to the CSS box model.

Box-edge keywords

The Box Model specification defines a set of keywords that refer to the edges of each part of the box, these are used as keyword values in CSS including as a value for the box-sizing property, to control how the box model calculates its size.

The edge of the content area of the box.

The edge of the padding of the box, if there is no padding on a side then this is the same as content-box .

The edge of the border of the box, if there is no border on a side then this is the same as padding-box .

The edge of the margin of the box, if there is no margin on a side then this is the same as border-box .

In SVG refers to the stroke bounding box, in CSS treated as content-box .

In SVG refers to the nearest SVG viewport element’s origin box, which is a rectangle with the width and height of the initial SVG user coordinate system established by the viewBox attribute for that element. In CSS treated as border-box .

Reference

Note: This specification defines the physical padding and margin properties. Flow-relative properties, which relate to text direction, are defined in Logical Properties and Values.

Properties for controlling the margin of a box

Margins surround the border edge of a box, and provide spacing between boxes.

Properties for controlling the padding for a box

Padding is inserted between the content edge and border edge of a box.

Other properties

There are other properties that relate to the box model, that are defined elsewhere.

The border properties specify the thickness of the border, drawing style and color.

Controls what happens when there is too much content to fit into a box.

Guides

Explains one of the fundamental concept of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas.

Sometimes, two adjacent margins are collapsed into one. This article describes the rules that govern when and why this happens, and how to control it.

Explains the visual formatting model.

Specifications

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

CSS Box Model

In CSS, the term «box model» is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:

Explanation of the different parts:

• Content — The content of the box, where text and images appear
• Padding — Clears an area around the content. The padding is transparent
• Border — A border that goes around the padding and content
• Margin — Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between elements.

Example

Demonstration of the box model:

Width and Height of an Element

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.

Example

This element will have a total width of 350px:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Источник

How to Use the CSS Box Model and Style SVG Images

Njoku Samson Ebere

Every programmer who wants to write clean CSS and build great user interfaces should understand the CSS Box Model.

Before I understood the foundations of CSS, I would often write unnecessary styles for margins and padding.

CSS Box Model forms the basis for styling any element on a website. So understanding the concept will help you target HTML elements and write fewer lines of code that are clean and easy to maintain.

This article will teach how to target the properties of any HTML element and apply the right style. You will also learn what SVG images are and how to style them.

What is the CSS Box Model?

The CSS Box Model is the relationship between an HTML element and the spaces around it – its padding, border, and margin.

• Padding is the space that surrounds a given HTML element
• The border is the space that surrounds the padding
• Margin is the space that surrounds the border

In other words, the padding surrounds the HTML element, the border encloses the padding, and the margin houses the border. The image below illustrates it all:

Now, enough of the theory – let’s translate the diagram into code.

Let’s Code

Notice that the image came with a default space around it. That is the default margin. Let’s remove it.

Enter the following CSS into the style tag of your HTML file:

This code removes all the margins around the image. Notice that there is no longer a space between the edges of the browser and the content in the image below.

Now let’s get down to the main business.

Add a border with the following code:

This code adds a red border around the content. The border’s width is 5 pixels.

And add some padding with the code below:

The code above now creates a space between the content and the border. That space is called padding. It is 20 pixels wide.

Type the following code to add a margin:

You will recall that we removed the margin when we set the margin to 0px. The code above now adds our custom margin that is 20 pixels wide. It creates a space between the red border and the browser edges.

You can get the code for this section here or copy the code below:

    body < margin: 0; >img   

YESSSS! We did it. We made it!

How to Style SVG Images

Now that you understand how the CSS box model works, let’s try styling an important HTML element – an SVG. It is a bit different from other elements but the principles are the same.

SVG images are lightweight resources that can help speed up your applications. This section will help you look at SVGs from a friendly perspective and build better applications.

SVG files consist of elements such as the and elements. You do not have to memorize them. You can inspect the SVG image in your browser to see the different parts and how you can target the element you want.

These elements have a border (represented as stroke) and background-color (fill) attributes. We will be looking into those in a bit.

You can download the SVG image for this tutorial here. And you can get the starter project here.

In the starter project, I have gone ahead and:

1. Added the downloaded SVG file to the project directory.
2. Created an index.html file.
3. Copied and pasted the SVG code from the SVG file into the index.html file.
4. Created a style.css file with the following code to center all contents:

If you run the project in a browser, you should have the following output:

How to Style the SVG Image

Make the Image Responsive

Change the width and height properties of the SVG element to 50% and 100vh, respectively, in the index.html file to make the image responsive like so:

Now, your output should be like this:

Looking sharp, let’s move on!

How to Change the Border Color

The SVG image we are using in this tutorial contains a element, element, and element.

We will target the whole path and circle at once and give them border-colors and width with the following code:

Check if your output matches mine below:

Notice that we changed the path ‘s border color to red with a reduced width . Then we changed the circle ‘s border color to dark blue. How Awesome!

How to Change the Background

We could change the background color for the paths and circles as we did with the border , but let’s do something different. We are going to give each path and circle different background colors.

Each path and circle has a unique id .

Let’s add the following code to our styles.css file to give the path and circle different background colors with the following code:

#torso < fill: blue; >#left_leg < fill: green; >#left_arm < fill: indigo; >#right_arm < fill: yellow; >#ball < fill: hotpink; >#head

I now have a clown-like volleyball player:

If your clown looks like mine, then let’s proceed.

How to Add a Hover Attribute

To add a hover property, add the following code to the styles.css file:

My output is the GIF image you see below:

With the clown looking that way, let’s do one more thing.

How to Add Achor Tags

Now we’re going to wrap each path and circle with an anchor tag.

Give the anchor tag a title (represented as xlink:title ) and a href (as xlink:href ) attribute in the following manner:

Go ahead and use any title and URL of your choice. I added my social media profiles and other websites I built. Checkout mine below:

Apart from changing the stroke width, we can see labels , and each part of the image is linked to a different website.

The xlink:title and xlink:href attributes add a label and URL individually.

All codes for this section is here. The project is live here

Conclusion

CSS gets a bit easier when you understand the basics. This article aimed to teach them to you.

You have learned the difference between margin and padding. You also saw how they are related. Once you understand this, moving elements around the page becomes easy. In all, use padding to move an element within its container or axis and use a margin to create space between elements.

I enjoyed dissecting that SVG image with you. You now know how to work with any SVG image that comes your way. They might differ, but the principle is understanding how their elements are named. Then you can target those elements in your styling.

Try out more SVG images and see how they come out.

Источник