Why padding bottom always greather than padding top in html5 năm 2024

At review corner, I tried to change the html and CSS a little. I write the only word “hello” between

of html and changed all padding to “ 0 “ of div. I thought it would get no space between the word “hello” and border. But the result is, even if I write “padding: 0 0 0 0 ;” , there is still space! So how can I disappear the space between word and border?

{ border: 1px solid black; 
} 
div { height:100px; 
background-color: 
# CC0000; 
margin:0 0 0 0; 
padding:0 0 0 0; 
font-size:100px; // if padding top and bottom is 0px, I think the word is put inside the border..... }

Answer 542fc7f5282ae3b576001ede

annoying isn’t it? what you didn’t know is that this stylesheet is running without you knowing it. and if you look closely to this stylesheet (or just use the search function). you will find: body {margin: 8px} so to be in control of this, add this: html, body { padding: 0; margin: 0; }

points

over 9 years

Answer 5430716e7c82ca9941003c95

The default padding of a div is 0. There is no need to set it. What is significant, though, is that normal text has a line height with a number of reference lines in that.

1. Base line.
2. x-height.
3. Cap height.
4. Extender
5. Descender
6. Tail

All of which fits into line height, which is generally greater than the font-size by about 0.2em. Usually there will be one or two pixels above and below, except a tail may extend below this by a pixel.

To squeeze all the text up to and down to a top and bottom border, set the font-size equal to the line-height.

font-size: 3em;
line-height: 3em;

The two can be juggled depending upon the font and case. No padding involved.

Typographer’s Glossary

points

Submitted by Roy

over 9 years

Answer 54308209631fe9015b003d5c

You can use lesson 10/25 to run this test example:

Add this to the style sheet:

blockquote {
    margin:0;
    padding:4px 0 0 0;
    font-size:3.0em;
    line-height:1.0em;
    text-decoration: overline underline;
    text-align:center;
}

Add this to the HTML, just under the DIV tag

TEST TEXT

We can immediately see the results but if you wish to, save it, then you have it to refer to later.

This would appear to conflict with my last post. Look at the disagreement between font-size and line-height. Oh well. One thing I am well used to is being overly presumptuous. Every case is its own scenario. Here we used BLOCKQUOTE instead of DIV. Will need to test with a DIV and see what happens.

Perhaps em in line-height is calculated against the text being a base reference of 1em regardless of its size. These are all things we will find ourselves wondering. We could also use px units, and would doubtless get different results.

At any length, experiment and see what sort of things you can up with. We still haven’t touched on container

font-size: 3em;
line-height: 3em;

0 as a constraint, or using

font-size: 3em;
line-height: 3em;

1s instead of

font-size: 3em;
line-height: 3em;

2. Lots to try out.

points

Submitted by Roy

over 9 years

Answer 5430863b52f8634369003d79

Okay, as suspected, px units work differently than em.

div, blockquote {
    margin:0;
    padding:4px 0 0 0;
    font-size:3.0em;
    line-height:1.0em;
    text-decoration: overline underline;
    text-align:center;
}
div {
    font-size:48px;
    line-height:48px;
}

and,

    
TEST TEXT
    
TEST TEXT

Both outputted the same.

points

Submitted by Roy

over 9 years

Popular free courses

• Free Course

  Learn SQL

  In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language. Language Fluency
• Free Course

  Learn JavaScript

  Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity. Language Fluency

Free Course

Learn HTML

Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.

Why does padding make element bigger?

Without the CSS box-sizing Property This means: When you set the width/height of an element, the element often appears bigger than you have set (because the element's border and padding are added to the element's specified width/height).

What is the default value of padding

Definition and Usage.

What is the difference between padding and padding

An element's padding is the space between its content and its border. The padding-top property sets the top padding (space) of an element.

How do I add padding only top and bottom?

If you only wanted to change the top and bottom, just use the shorthand padding:30px 0px 30px; would be top, right, bottom. Inherit basically inherits only the parent element's style but in your case you can't use inherit but you can do the following for two "p" elements using class.