![]() ![]() We can achieve this by setting the “box-sizing” property to “border-box”. We ideally don’t want to increase the size of the element, but rather shrink the content inside the element to make up space for the padding and border. It’s the same with the border: if you give a 4px border to your element, its size will increase by 4px. ![]() Yes, the amount of padding you give to an element is added to the dimension of the element. Say you create a div of 100px x 100px, and give it a padding of 10px. This is one more default behavior that you must remember. How? The padding and the border increase the size of the element That means the width and height of the div have increased. Your browser now has a horizontal and vertical scrollbar. Let’s give 1px padding to our “full-bg” div and see its effect: If the parent element has a padding even of just 1px, or has a border of at least 1px, then this won’t happen. The margin of the child collapses with the margin of the parent. When you have two block elements (the div and h1 in our case), and the parent element doesn’t have any padding or border, then the top and bottom margin of the child element will be displayed as the top and bottom margin of the parent. This happens because of Margin Collapsing. Ideally, it should have been displayed like this:īut it instead displays a gap above the “full-bg” div. So why did it display a gap outside the div? Well, it turns out, the h1 element, just like the body element, also has some margin by default, and so do the h2, h3, h4, h5 and h6 elements.īut, even if the h1 element had a margin, it must be displayed with some gap inside the div with our background image. Let’s add a heading using the element and give it white color using the "color" property in CSS: We also set the backgound-position to center the background image.īoth the problems are solved. We can change this to scale the image in such a way that it will cover the screen by setting the “background-size” property to “cover”. By default, the image will be displayed in its original size. Next, let’s solve the image scaling problem. Refresh the browser and you will see that the white gap is gone and there is no scrollbar now. Let’s remove the margin by setting it to 0 on the body: That’s why we see that gap around the image. The body element by default has some margin to it. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |