Let's see how it looks in the browser:

As you can see, we have set a certain height and width. If we set the height to be smaller than the text fits, then the text would extend beyond the block. Experiment with height and width. At first it will be difficult to determine the required size in pixels by eye, but over time you will get used to it.

This is a small and simple lesson. Try resizing the block yourself and see what happens. Practice is the most quick way learn something!

Hello, dear readers of the blog site. Today we will talk about how you can set the dimensions for the content area using height and width and how to configure the display of this content in case there is more of it than can fit in the space allocated for it (css overflow rule with hidden, scroll, auto).

First paragraph text

Text of the second

Because width and height for these paragraphs are not specified, then by default the browser itself calculates them based on its own understanding of the Auto value. As a result, paragraphs take up all the space available to them in width, and in height correspond to the height of the content contained in them.

Let's now make the first change and hardcode the width of the first paragraph (width:50px):

Text of the first

Text of the second

In general, the expected happened - the horizontal size decreased to the value specified in width:50px, and the height of the paragraph is still formed thanks to height:auto (the default value). As a result, it became such that it could contain the entire text.

But let's now limit the height of the container using height:15px.

As a result, we got that the text no longer fits into our small paragraph container and therefore it safely ran into the area of ​​its neighbor. This is precisely what it serves to control the behavior of content in such situations. overflow rule.

Overflow means "overflow" or, in other words, "content overflow". It talks about what should happen to the content if it does not fit within the area (container) that was allocated to it.

Overflow has several valid values, but the default is visible (show):

This is why in our last example the text of the top paragraph overlapped the bottom one (overflow:visible was used by default - show content that does not fit into the container). We could use the other extreme - overflow:hidden. Then everything that does not fit inside the container would not be shown on the web page:

The other two values ​​of this CSS property allow you to scroll content that does not fit into the container (we already observed something similar when we studied ). So, scroll will display vertical and horizontal scroll bars even if the content fits safely within its designated container:

But it would be much more logical to use the value Auto for Overflow if you need to make scrollbars. In this case, the browser itself will calculate when to display them and on which axes.

For example, if we use overflow:auto, we will be able to scroll only along the axis where the content does not fit within the boundaries of the container:

Text of the first

Text of the second

To summarize, we can say that Overflow allows quite flexibly configure content display options in the case when it climbs out of its container. You will have the opportunity to show the content that has left (visible), not show it (cut it off - hidden), or make it mandatory to scroll (scroll) or scroll as necessary (auto).

There are also variants of writing this rule related to CSS3, but which are supported by all browsers, which means they can be safely used. I'm talking about the overflow-x and overflow-y options, which allow you to set or not set scrolling on individual axes (x - horizontal, y - vertical).

If, for example, you need to make sure that horizontal scrolling never appears, and vertical scrolling appears only when necessary (if the content does not fit), then for the Html element you will need to specify overflow-x:hidden and overflow-y:auto . That's it, the problem will be solved, because this ear trick is supported by all browsers.

Height and width as a percentage - why do you need a doctype?

Now let's talk about what the width specified as a percentage is calculated from. Remember, at the beginning of the article I promised to focus our attention on this. Well, actually, the CSS width rule is no exception here and, just like padding and margin, is calculated as a percentage of the horizontal size of the content container.

The situation is somewhat more confusing with the height of the content area specified as a percentage. It would be logical to assume that the same applies to the height of the container. But here we begin to encounter dualism (two models of behavior) - as they did before and as they do now according to accepted standards. In this regard, we should once again touch upon the topic of display modes, which we discussed earlier.

Historically, after the adoption of standards, there was still a large number of documents generated according to the old rules of pure HTML language and something had to be done with them. At the same time, it was also evolving (a style markup language emerged and some tags and attributes became obsolete), so it was necessary to somehow show the browser by what standards it would need to parse this code.

In order to separate the new documents (which took into account all emerging standards) and old ones (which often did not take into account anything except pure HTML), the Melkosoft company proposed using a small feature from the XML language that had just appeared at that time. This feature was a service feature and is now called the doctype declaration.

It may look different (read more about this in the article mentioned just above), but this option will always work:

Thus, the browser received a marker of what standards it should use to parse the document. If the doctype declaration is present, then it goes into standards mode. If the browser does not find the doctype on the first line of the document’s code (or it is written incorrectly, which is identical to its absence), then it goes to the so-called trick mode(quirks mode).

A document that lacks a doctype will appear in the browser as if it were very old (antique). If you add a declaration to the same document, then the browser will shed its antiquity and begin to work with the document code according to all currently accepted standards.

But the concept of antiquity is very different. For example, what kind of antiquity can a now popular columnist have? Google Chrome, which appeared only in 2008? IE, of course, has a rather rich history. Therefore, all browsers of any version will display the document without a declaration (in quirks mode or tricks) in the same way as an old one would do, because this is the version that is considered the base one.

Why did I talk for so long about browser display modes? But because for these two modes, specifying the height (height) of the content area as a percentage is very different in relation to the calculation of this very height.

Setting the height (in percentage) of the area with content in standards mode (when the correct doctype is specified at the beginning of the document) will not be possible at all unless the height for the container in which this content is enclosed (specified by you in percentage height will be ignored).

If we remove the doctype declaration from the document code, we will see the following picture:

For the mode of following standards (a declaration is written at the beginning of the document), you must first set the height of the container (in our case, for a Div, the container will be the Body tag) and only then the browser will correctly handle height:100%:

As a result, we ended up with two completely different approaches when setting the height of the content area as a percentage, so to avoid problems, I definitely advise you to specify the correct doctype declaration at the beginning of all your documents (web pages). There is another example where the difference between the mode of following standards and the mode of tricks will be colossal.

If you set the height and width for a content area for any Html element, and also specify padding and border width for this tag, then in quirks mode (without a written declaration) in different browsers this can all be interpreted in different ways.

In the old IE 5.5 browser, the padding and frame width will count inward from the dimensions specified through height and width. Those. the overall size of the element will correspond to what is specified in these CSS properties(this is an outdated scheme that is no longer in use).

In the rest modern browsers padding and border width will be added to the dimensions specified in height and width. Those. in this case (trick mode without doctype), the initially specified dimensions of the content area will be expanded by the amount of internal padding and border.

Well, if you write a directive in the document, then in absolutely all modern and old browsers these problems with the duality of the approach can be easily avoided. In this case, and in IE 5.5, the padding and border width will add up to the content area dimensions, as required by modern CSS standards. Therefore, to avoid always use doctype.

Good luck to you! See you soon on the pages of the blog site

You might be interested

Position (absolute, relative and fixed) - ways to position Html elements in CSS (rules left, right, top and bottom)
Float and clear in CSS - block layout tools
Padding, Margin and Border - set internal and external padding in CSS, as well as borders for all sides (top, bottom, left, right)
Positioning using Z-index and CSS Cursor rule to change the mouse cursor
What is CSS for, how to connect cascading style sheets to an Html document and the basic syntax of this language
Tag, class, Id and universal selectors, as well as attribute selectors in modern CSS Different designs for internal and external links via CSS
Priorities in Css and their increase due to Important, combination and grouping of selectors, user and author styles
Display (block, none, inline) in CSS - set the display type of Html elements on the web page
Dimension units (pixels, Em and Ex) and inheritance rules in CSS

In the case of HTML documents, tags work more to mark up content than to indicate how it should be presented. Greater control over presentation is achieved with styles. In this article I will look at those styles that are associated with paragraph formatting in HTML.

Tag

In HTML, you can specify paragraphs, and the align attribute aligns them left, right, center, or justified. In addition to them, we will use the global style attribute.

Paragraph alignment

You can align a paragraph using the align attribute with the following values:

text-align: left|right|center|justify|initial|inherit;

Copy the following code into your .html file.

This paragraph is center aligned

This paragraph is right aligned

This paragraph appears justified in the browser window. A justified paragraph is aligned to the right and left by adding extra spaces. You can see that the edges of the justified paragraph match the edges of the left- and right-aligned paragraphs. In a left-aligned paragraph, the left edge is straight, while in a right-aligned paragraph, the left edge is straight. Do you see how both edges of this paragraph are straight? This is achieved through the text-align:justify style.

In a browser window, the HTML code for the paragraph looks like this:

Line spacing

You can control paragraph line spacing using style=line-height . Use the style attribute with the following values:

line-height: normal|number|length|initial|inherit;

Below is an example of HTML code that displays paragraphs with different line spacing:

This paragraph uses two values ​​for the style attribute. The first line-height:1.5 specifies one-and-a-half line spacing for the paragraph, and the second value text-align:justify specifies that the paragraph text should be distributed across the width.

This paragraph is double-spaced and justified. line-height:2 specifies double spacing. The style attribute does not have to have two values. But if you need to specify two values, you can do so by separating them with a semicolon.

Here are a few different ways to use the line-height value for the style attribute:

: Sets the line spacing to 13 pixels;

: Sets the HTML spacing between paragraphs to 200% relative to the current font size;

: Sets the line height to 14 pixels.

Indentations

I used the term "indents" to make it easier to understand. But in HTML, we use spacing to create empty space around an object. You can use the style attribute with a padding value to indent a paragraph to the left or right.

Below is an example of paragraphs with left and right indentation:

This paragraph is not indented, it is simply justified. Look at the P element's style attribute for this paragraph.

For this paragraph, I set the left padding to 30px using the padding-left:30px style. This paragraph is also justified using the text-align:justify style. As you already know, we can use multiple values ​​for the Style attribute by separating them with a semicolon.

And this paragraph has a right indentation of 30 pixels, but no left indentation. It is also aligned to the width. The 'padding-right' value of the style attribute specifies the right padding. If you don't see the effect, reduce the width of your browser window so that the justified HTML paragraph displays properly.

Indentation between paragraphs (indentation before and indentation after paragraph)

In HTML or CSS we don't need this. We can simply specify the padding style for the element

Padding-top and padding-bottom specify white space before and after a paragraph, which acts like padding at the top or bottom. Look at the tag example below

I set the first HTML paragraph to have a padding of 10 pixels before the second paragraph and 50 pixels after the second paragraph:

This paragraph does not have any before or after indentation specified. This is a regular paragraph, justified. As you already know, we can justify a paragraph using the code style=”text-align:justify” inside the tag.

This paragraph is outsized. It also has 10 pixels of padding before the paragraph and 50 pixels after it. Inside the tag I have set 3 styles.

This is a regular paragraph with no indents and default alignment.

Things to remember

• An HTML paragraph can be aligned using the align attribute or the text-align style;
• HTML will be rendered differently depending on screen sizes, browser window sizes;
• Adding extra spaces or empty lines The HTML code does not affect the output. The browser removes all extra spaces;
• Tags define what should be displayed, and styles define how it should be displayed;
• Styles can be specified in three in various ways— built-in (within tags), internal ( inside the same HTML file using the element