What is box in html

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.

Источник

Intro to the box model

Learn about the box model and how it shapes web design.

How to use boxes for responsive design

Web content isn’t like a slideshow, where elements can be manually positioned anywhere. On slideshows, content is created to be viewed at 1 resolution and isn’t responsive on devices and browsers of different sizes.

Web layouts behave more like a text document, where content flows naturally from the top-left of the page, then moves to the next line (i.e., wraps) when it hits the right-side boundary of the document. The content is responsive because the content conforms to different resolutions. For instance, if you resize a text document window, the content layout will adjust accordingly, without decreasing the size of the content.

At first, the box model may sound rigid, but it offers tremendous flexibility when creating responsive layouts for varying devices and screen sizes. Learn more about responsive design.

How to nest boxes

One important aspect of the box model is that it allows you to put boxes inside other boxes (i.e., “nest” boxes). That means that you can drop elements into other elements to add flexibility to your design.

Like other elements on the web, Webflow elements are boxes that you can nest inside each other. For example, you can place a heading and a paragraph element inside a container element. The container groups these elements together, and if you move the container all the boxes inside it move too. Learn more about element hierarchy.

How to style boxes

You can use CSS (Cascading Style Sheets) to style boxes (i.e., elements). Boxes aren’t fixed — you have control over all their styling.

How to add spacing within and between boxes

By default, when the contents of a box increase, the size of the box increases too. That means there’s usually no need to set defined heights on elements — instead, you can let the content determine the height. For instance, if you have a heading and paragraph element inside of a container element, the container’s height is determined by the heading and paragraph elements.

You can also create spacing between elements and within elements with margin and padding. Margin creates space outside a box, pushing other boxes away, and padding creates space within a box (between the box’s borders and its contents). This spacing can be applied to any box — a box that contains other boxes (a “parent” element), or the boxes inside another box (the “children” elements).

How to change box layouts

You can create a website by just adding content to a page and adjusting padding and margin. But you’ll often want to change the layout of elements, so they distribute horizontally or in a specific place on the screen. That’s when you can use display settings and position properties to control an element’s layout behavior.

Источник