Why some elements don't have height and width?

Question

Why do we need to set height and width, and why some elements don’t have it?

Answer

It is not always necessary to set a height and width. Elements by default are block elements and will have the same width as the container, and their height will vary depending on their content. The element’s measurements will be decided by what purpose we want it to have, just like news paper’s editors will arrange the columns, sometimes we will want to have an image that will only cover half of the screen, or even less. That is when we could use height and/or width measurements.

14 Likes

What will be the result of a mobile screen, for example, if the content or padding overflows the screen? Will there be an effect on the visual performance of that particular website?

2 Likes

That’s why we use, overflow property! Check out the overflow section.

5 Likes

Oh, I get it! Thanks for the reference!

1 Like
  1. So, if setting width and height in CSS is absolute and will make a page look awful in a mobile device… wouldn’t it not be best practice and not used?

Is there an alternative to make a page look great on all devices while still having some order?

1 Like

Yes, and we can expect it to come up, shortly. It’s called responsive design and uses what are called media queries to set out special rules for a range of device widths.

Another term you might run across is adaptive design which is not the same thing but similar in nature. It focuses on using one layout that can expand and collapse as the device width increases and decreases. As an old-schooler, I would still try to leverage adaptive techniques to get the most out of them, then apply responsive techniques for the situations that cannot be easily adapted.

Two newer techniques have been incorporated into native CSS that feed into both adaptive and responsive design considerations. Flex and Grids, both of which are taught in the HTML/CSS courses. Again, one can leverage these to the fullest extent of their ability to meet our needs, then apply media queries with the nasty bits.

12 Likes

thank you! That helped a lot. I was trying to figure out why I was adding things as a matter of the course of CSS that sounded like a bad idea long term.

1 Like

Why my text is not aligning in the center? While text-align is set to center. It only happens when I give a height property. Otherwise the text is in the middle. Thanks.

1 Like

For example, viewport units.

as coderunner_pks1 said , that’s why they made overflow property, moreover they made the media query to make responsive layout for different screen devices.