CSS Dimension How big element should

go to ForumEasy.com

CSS + jQuery

Home | MyForum | FAQ | Archive

You are not logged in. [Login] or [Register]


Forum Home » CSS Layout » CSS Dimension -- How big an element should be.

Email To Friend |

Set Alert To This Topic

Rewarding Points Availabe: 0 (What's this)

New Topic |

Post Reply

Author

Topic: CSS Dimension -- How big an element should be.

CyberSpider
member
offline

posts:	47
joined:	04/10/2016
from:	San Francisco, CA

posted on: 04/16/2016 02:28:53 AM

Edit |

Quote |

Report

CSS Dimension -- How big an element should be.

For inline element, there is no way to control the dimension of those elements as they only take up space as much as necessary.

For block elements, however, we can instruct the device how exact dimension of those elements should be displayed. The properties of dimension are:

width -- auto, 200px, 20em, 80%;

min-width -- 0, 100px, 10em, 50%;

max-width -- none, 500px, 50em, 90%;

height -- auto, 200px, 20em, 80%;

min-height -- 0, 100px, 10em, 50%;

max-height -- none, 500px, 50em, 90%;

Note: Those properties specify the dimension of the content area of an element. The content area is inside the padding, border, and margin of that element.

    .box {
        border: 1px solid red; 
    }
    #div1 {
        width: auto; /* default */
    }
    #div2 {
        width: 400px; /* fixed */
    }
    #div3 {
        min-width: 300px; /* min */
    }
    #div4 {
        max-width: 500px; /* max */
    }

Try it yourself in sandbox »

Profile |

Points Earned: 0

CyberSpider
member
offline

posts:	47
joined:	04/10/2016
from:	San Francisco, CA

posted on: 11/06/2022 04:43:40 AM

Edit |

Quote |

Report

The box-sizing Property

Defines how the width and height of an element are calculated: should they include padding and borders, or not.

.div1 {
    box-sizing: content-box;  /* default */
    width: 300px;
    height: 100px;
    padding: 30px;  
    border: 10px solid blue;
}

.div1 {
    box-sizing: border-box;  /* all dimension are referring to border-box */
    width: 300px;
    height: 100px;
    padding: 30px;  
    border: 10px solid blue;
}

Profile |

Points Earned: 0

Get your own forum today. It's easy and free.