CSS width and height parameters for setting the sizes of html page elements

CSS uses absolute and relative units to size various elements. Absolute units are independent of the output device, but relative units define the size of an element relative to the value of another size.

Relative units

Relative units are usually used to work with text. In table 1 lists the main relative units.

The em unit is changeable value, which depends on the font size of the current element (the size is set via the font-size style property). Each browser has a built-in text size that is used when this size is not explicitly specified. Therefore, initially 1em is equal to the default font size set in the browser or font size parent element. Percentage notation is identical to em , in that the values ​​of 1em and 100% are equal.

The ex unit is defined as the height of the lowercase "x" character. ex is subject to the same rules as em , namely that it is bound to the browser's default font size or to the font size of its parent element.

The ch unit is equal to the width of the "0" character for the current element and, like em, depends on the font size.

The difference between em and rem is as follows. em depends on the font size of the element's parent and changes with it, and rem is tied to root element, i.e. the font size specified for the html element.

There is also a group of relative units tied to the size of the browser viewport. In table 2 shows a list of them with a description.

Absolute units

Absolute units are physical dimensions- inches, centimeters, millimeters, points, picas, and pixels. For devices with low dpi (the number of pixels per inch determines the pixel density), the binding is per pixel. In this case, one inch is equal to 96 pixels. Obviously, the real inch will not match the inch on such a device. On high DPI devices, the real inch is the same as the on-screen inch, so the pixel size is calculated as 1/96 of an inch. In table 3 lists the basic absolute units.

Example

30px header

Text size 1.5 em

24 point headline

Shift text to the right by 30 millimeters

Note

When setting dimensions, be sure to specify the units of measurement, for example width: 30px. Otherwise, the browser will not be able to show the desired result because it does not understand what size you require. Units are not added only when zero value(margin: 0).

Internet Explorer supports the unit vm instead of vmin .

Specification

Each specification goes through several stages of approval.

• Recommendation - The specification has been approved by the W3C and is recommended as a standard.
• Candidate Recommendation ( Possible recommendation ) - the group responsible for the standard is satisfied that it meets its goals, but requires help from the development community to implement the standard.
• Proposed Recommendation Suggested Recommendation) - at this stage the document is submitted to the W3C Advisory Council for final approval.
• Working Draft - A more mature version of a draft that has been discussed and amended for community review.
• Editor's draft ( Editorial draft) - a draft version of the standard after changes were made by the project editors.
• Draft ( Draft specification) - the first draft version of the standard.

What types of elements are divided into?

The fact is that not all fragments on a web page are blocks. Elements are generally divided into block and inline elements. The latter can easily be written on one line and do not need to write anything additional. Simple example inline element- link. There can be as many links as you like on one line, as long as they fit on it.

Block elements have completely different behavior. Without additional manipulations, they will not be able to stand in one row. An example of such a block is a paragraph, which is specified by the p tag. So, why am I telling you all this? This is said so that you understand that the size needs to be set only for block elements, which is what we will do in this article.

Rice. 1. Basic properties that help set the size

Simple properties for dimensions

The most simple properties, which can be used to write down dimensions are width and height. They mean width and height, respectively. You can also add the prefixes min- and max- to them. In this case, the minimum and maximum width or height will be set, respectively.

Values ​​can be written in pixels or percentages. Sometimes the relative unit em (font height) is also used, but usually it is used to determine the size of the text. By default, all meshes (main building blocks template), in which the dimensions are determined as a percentage, are called rubber. Also, percentage notation helps to easily adapt the template, which is also very important.

Size in pixels

The so-called absolute values. For example, the entire site should be contained within a 1000 pixel wide container. This block is created and the width is written to it.

#container( width: 1000px; )

If written like this, then the width of the container will not change under any circumstances. When you change the scale or reduce the window, it will remain the same. The size of the site will not decrease and, if necessary, it will appear horizontal stripe scroll.

These are the so-called fixed templates. Today, many sites still operate this way. For example, social network In contact with. Try to reduce the size of the window on your computer and you will see that the template does not change at all. Of course, VKontakte has separate versions for tablets and smartphones, so they decided to leave a fixed template.

And yet, the ability of the site grid to adapt to new screens has a huge role today, because mobile traffic growing. Due to this last years More and more often, the main container for the site frame is given a non-fixed width. For example, like this:

#container( max-width: 1320px; )

And what does it mean? And the fact that, if necessary, the block will be reduced. If you shrink the window, it will also shrink. At the same time, if the screen resolution allows, the width will be exactly 1320 pixels. By reducing the window you will not see horizontal scroll.

However, you can also set the minimum width here. If this property is written to a block, it will not become narrower than the specified value. For example:

#container( min-width: 600px; )

If the window width becomes less than 600 pixels, the block will stop shrinking and the same horizontal scroll bar will appear.

Size in percentage

Specifying the value as a percentage is becoming increasingly popular. When used correctly, this can bring excellent website display to different devices.

For example, you wanted to make it on the left side of your website sidebar, and on the right is the area with the main content, where the main content will be displayed text information. For example, an article, a product catalog or a forum topic. First you need to determine what dimensions you want to give these containers approximately.

#sidebar( float: left; width: 28%; ) #content( float: right; width: 62%; )

As a result, the sidebar will receive 28% of the width of the parent element (and in our case this is the general container), and the main block - 62%. Their total width will be 90%. We will leave the remaining 10 for various external and internal margins, frames, etc.

Rice. 2. Rubber blocks change their size when the browser window is reduced

How do padding affect block sizes?

When you set the width of a block using the width property, it may not be the final value. The fact is that this way we determine the width of only the part that directly contains content. It must be remembered that in css padding increases the block size, just like a border.

Let's take a side column. We gave it 28% of the entire width of the container. But to prevent the content in the sidebar from sticking to the edges, it needs to be given some padding. You may also want to add a border to the side column.

#sidebar( padding: 10px 20px; border: 2px solid black; )

Hello, today we will look at such an important element of the site as a block, and this article is inextricably linked with the article about block design in which we looked at how you can create both block containers and built-in elements for our site on the site. After studying this article, I am sure that we will become much clearer about how to work with blocks and this will be a very significant step towards creating our own website.

Block height and width in CSS.

Let us now look at the main functions that will help us manage appearance and the position of the site blocks and after that we will need to put all this knowledge into practice and we will create a simple frame for the site.

The height of a block in CSS is set using the command height: auto|<высота в единицах измерения>|inherit and as you already understood, we can set the height of the block using the auto command, we give the command to the browser that it itself can determine the size of the block and thus the block will be of such a size as to fit all the elements and no more.

The inherit command will allow you to borrow parameters from a parent element and these values ​​will only be visible if parameters have been set for the parent element. But most often you need to set the block size specifically, just specify the size in one of the accepted values ​​(most often these are pixels).

We can also set the size relative to the parent element and for this we need to use percentages. Let's see how this looks in practice.

This command tells the browser that a specific element on the page should be set to a size of ten percent of the size of the parent block.

The width of a block in CSS is set using the width parameter: auto|<ширина>|inherit all parameters are the same for both the height and width of the block and I think there is no point in repeating it again. I just want to say that it is not necessary to specifically set both the height and width of the block, you can set, for example, the width and the height will increase depending on the content, which is very convenient if you don’t know what content will be on specific page.

Minimum and maximum block width.

Also, for each block we can set not specific parameters, but the minimum and maximum parameter for any block on the site. Thanks to this, you can fill blocks without fear that they will go beyond the browser window.

To set this is very simple, we need to set the following parameters to set the minimum width and height:

min-width:<ширина>

min-height:<высота>

And for the maximum, two parameters are needed:

max-width:<ширина>
max-height:<высота>

Now we can set both the maximum and minimum size for a block or completely for the entire site, and this is important for a site with rubber design, if fixed, this parameter will not work.

Options for float placement in css.

In all the previous examples where we created containers and elements are placed one after another in order, but this is not enough for us to create a design, we need the ability to place elements at our discretion and the property will help us with this float in css and now we will look at the application of this property on practice.

The float parameter can take several values, and now we will figure out what these parameters are:

float: left|right|none|inherit

Now let's look at each example separately.

The float: left command means that the block should be aligned to the left and all other elements will flow around it to the right.

float:right is the exact opposite of the previous command and, accordingly, the block will be aligned to the right and all elements will flow around it to the left.

float:none is the default behavior for each block, placing the blocks one after the other. The use of this parameter is not relevant now and it is used very rarely and rather simply out of illiteracy.

Clear parameter in css.

Very often, when creating a design on blocks using the float command, you need to give some blocks a command so that they do not flow around the block but behave as usual, being placed below all the others. This problem was previously solved using the float:none command the desired block but the display in each browser may be different and therefore in such cases it is much more rational to use the clear command and now we will see how this can be done.

clear: left|right|both|none|inherit

The command has four parameters, and now we’ll figure out exactly what functions it performs with each one.

The clear: left command means that the element is placed below all elements with the float: left parameter.

The clear:right command places a block below all elements with float: right.

The clear:both parameter places the element below all blocks with both float: left and float: right parameters.

clear:none is normal behavior for a block. This parameter should not be specified if floating containers have been placed before.

We apply all knowledge in practice.

So we have come to the conclusion of the article in which we need to see how we can apply all this in practice and the first thing we will do is create a simple framework for the site. This is what our frame will look like.

As we can see, for the wireframe we will need to create four DIV blocks and to them we will need to apply both size and placement parameters.

We have created four blocks and now we need to fill them with information and set the background for each block so that we can see which block is located and where. You can find out about setting the background. And this is what kind of code we should have.

After this, we need to go to the style file and write down all the commands we need. The commands are all the same for all blocks, only each one has its own parameters.

Header(width:500px; block width
height:100px; block height
background-color:#33CCFF;) block color

Content(width:400px; block width
height:400px; block height
background-color: #33FF33; block color
float: left;) block position

Sidebar(width:100px; block width
height:400px; block height
background-color: #CCCCCC; block color
float:left;) block position

Footer(width:500px; block width
height:100px; block height
background-color: #0000FF; block color
clear:both;) standard block position

And after we write all these commands, we will get such a framework for the site.

By default, block elements use autowidth. This means that the element will be stretched horizontally exactly as much as it is free space. The default height of block elements is set automatically, i.e. The browser stretches the content area vertically so that all content is displayed. To set custom dimensions for an element's content area, you can use the width and height properties.

CSS property width allows you to set the width of the element's content area, and the property height content area height:

Note that the width and height properties define the size of the content area only, in order to calculate the total width block element, you need to add the width of the content area, left and right padding, and the width of the left and right frame. The same goes for the overall height of the element, only all values ​​are calculated vertically:

For this paragraph, we will set only the width and height.

This paragraph contains, in addition to width and height, padding, border and margin.

The example clearly shows that the second element occupies more space than the first one. If we calculate using our formula, then the dimensions of the first paragraph are 150x100 pixels, and the dimensions of the second paragraph are:

that is, 180x130 pixels.

Element overflow

Once you have determined the width and height for an element, you should pay attention to one important point - the content located inside the element can exceed specified size block. In this case, some of the content will go beyond the boundaries of the element; to avoid this unpleasant moment, you can use CSS property overflow. The overflow property tells the browser what to do if the content of a block exceeds its size. This property can take one of four values:

• visible - the default value used by the browser. Setting this value will have the same effect as not setting the overflow property.
• scroll - adds vertical and horizontal scroll bars to an element.
• auto - adds scrollbars if necessary.
• hidden - hides part of the content that extends beyond the boundaries of the block element.