Making boxes in css

How to Make Boxes in CSS?

Learning how to make boxes is one of the most fundamental skills are far as learning CSS is concerned. It is one of the best ways of organizing sections on your web pages. Equally important, it is also a perfect way of grouping elements that look related. It is a concept commonly used when placing pictures and text together too.

In the event that you want to separate any content from the rest of a webpage, boxes won’t disappoint. It also plays a risk when you aim to emphasize something. Given how important boxes are, it becomes equally essential to understand how to go about it. That’s why this piece focuses on exactly that. So, without further ado, let’s dive into how to make boxes in CSS. Check it out!

How to Make Boxes around Pictures and Texts in CSS

Follow these steps to enclose your pictures and text in a box.

Step 1: Start by creating a block using HTML

One of the most commonly used blocks is the DIV, especially when enclosing text and pictures. Remember to give your block a class name and ensure it is valid. What determines whether the names are valid? Simply follow these rules, and you won’t have to deal with invalid class names:

• The first character of a valid class name in CSS can either be any letter between A and Z (both capital and small letters), a hyphen, or underscore
• Therefore, ensure that you don’t start it with a number because that will automatically make it invalid
• As for what follows after the letter of choice, underscore or hyphen, the rest of the characters don’t matter and can be any letters, numbers, underscores, or hyphens.
• However, ensure that a number doesn’t come right after two hyphens because that makes the class name invalid

Here is just a bit of an illustration of the code to use when making a div block

 
Write the text that you want to see inside the box. You can also insert the image if it needs to be there.
 

Step 2: Add style to the box

After creating the block and inserting what you want inside the box, it is time to style it. First of all, ensure that it has borders. Adding the border is as simple as inserting the following CSS code. Remember to replace the name box with the one you used for your class.

In addition to bordering your box, replace the solid black color with the one you deem fit or serve the occasion the best. When dealing with colors, there are several ways of representing one. The first one is using the color name. It only applies to 16 colors, usually the basic ones defined in CSS. The second one is to use the RGB value that can have 3 or 6 numbers preceded by a hashtag. An excellent example is replacing black with #000 or #000000. You can rest assured that the output will be identical since they mean the same thing.

1px is the dimension of the border of the class we named box in step 1. The figure you choose determines how thick or thin the border will be.

Besides solid, you are also at liberty to choose other bordering options. If you want a dotted border, replace solid with dotted, which will play the trick. If that’s what you are looking for, this is what your code should look like:

Other options include dashed and double for borders made of dashes and double-lined borders, respectively. Feel free to set the box’s background color to your liking, especially if you want it to stand out from the rest of the web page’s content. Other commonly used styles include making your box cast a shadow and creating rounded corners, just but to mention a few.

If you want the box to have a 3D effect, use groove, ridge, outset, and inset styles. Keep in mind that not all browsers can display such values.

How to Insert the Code

Once you have the code for the element based on how you prefer the box, border, and background, you will have to ensure that you insert the code correctly, or otherwise, you won’t see the effect. There are several options to do so, including the following.

1. When Only One Page is Affected

If that’s the case, insert the code in the head section just before its closing tag. You will have the enclose the CSS code with the opening and closing tags of a style section. It is how your code should look like:

2. When Several Pages are Affected

Two options will give you the desired output. One of them uses the above code on every page to apply the style. However, it can be tiring, especially if the number of pages is huge. Equally important, if you change any detail of the style, you will have to change every page. That, again, becomes time-consuming.

That’s where the second option comes in. It gives you the power to control the style of various pages from a single point. This method requires you to write the style of all the pages on a single style sheet. After that, add the link to this file in every file you want the style to be applied to. The style file has the .css extension, which programmers usually define as external style sheets. It has no HTML tags and only contains CSS rules.

If you save your external style sheet as box.css, this is the code that will make the changes to reflect on the web pages.

Ensure that it is within the head segment. To ensure that you get the replacement right, insert it write before the closing tag, .

Источник

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

Источник

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.

Источник