Hovering over an element in Chrome inspector shows its height and width:
Under "styles" it also shows the computed height and width.
My question is: which "height" and "width" is this? Does it include the border?
That width and height popover does not include margin or position.
The width and height shown in the popover is the width and height added with the padding and border of the element.
The full individual amounts are be shown in the computed section but with some basic addition, you should be able to see that the popover values are width + l-r padding + l-r border and the same for the height.
As shown, the core width and height are enclosed within the padding and border which is surrounded by a solid line.
Looks to include the border. Right click > inspect element > change the border width manually, and this becomes apparent.
Related
Hi everyone as you can see on screenshot container padding including scrollbar width. When I set padding-left : 0 to container its going to outside of webpage which means search icon stays under of scrollbar Help me please.
code here
Padding values add to the width of your container. So if your container width is set to 1210px with 15px padding on both sides, the rendered width of your container is 1240px. You can subtract the padding values from your width, making it 1180px.
I have a view in which I am using some drop downs like
Access Link
I am unable to show border bottom, I have tried to give border-bottom or border definition manually in that elements CSS but couldn't fix. Any help
It is not that it has no bottom border, but it is just not being shown by your browser.
Your button has a height of 40px. But it is also contained in a div that has a height of 40px and a box-sizing of border-box.
Based on this, when using border-box with box-sizing, the height allocated to the content (in this case, your button) is reduced after considering the border and padding attributes of the element (in this case, your div). I just do not know why the content appears to be being rendered in a way that it overlays the bottom border of your container div.
Note that the box-sizing property in your CSS is applied to all elements, including :before and :after pseudo elements.
You can resolve your issue and show the bottom border if you do any of the following:
Reduce the height of the button element (e.g., set .ms-choice to have height of 38px).
Increase the height of the container div (e.g. set to 42px). This will just mis-align your dropdown menus with your search input.
Change the container div to have a box-sizing of content-box.
Change the background-color of your button to transparent and put the white background color on your div.ms-parent.form-control. (I added this option to show that the button' is actually being rendered such that it overlays the bottom border of the containing div.)
Is this the correct behavior for padding to increase the total size of a box element ? I'm trying to set padding to the left side of a box element which has the width set to 940px but when I add 25px in padding to the left side it adds these pixels to the width of the box element making it overlap the body-wrapper which is the parent element.
I also tried marging-left but while this doesn't add to the total width of my box element it pushes it to the right causing it to overlap as well..
What is the best way to dealing with this issue?
Please check screenshot for a visual:
It is the default behaviour of the box model. You can learn more about the box model here.
In your CSS you can define the behaviour with the box-sizing attribute. In this case you'll want:
box-sizing:border-box;
border-box takes the padding and border sizes into account when setting the width of the element, which is what you're looking for. However, it will not calculate based on margin sizes.
So I was coding using Semantic-ui, and I have two toggle boxes (check boxes) next to each other in a flexbox container. When the window size is reduced, they wrap around so that one is on top of the other.
To get them to spread out a little, I added both right and bottom padding of around 5px. However I noticed a strange behaviour. Padding would cause the boxes to move apart horizontally, but when stacked vertically there was no space between them, even though there was bottom padding on each box.
Further investigation showed that the box-sizing property of the check boxes was set to border-box. After reading up, I found that the border-box box model calculates the width and height to include the padding and the border.
The checkboxes have a height of 1.5rem assigned.
My question is as follows. As is my understanding, padding shouldn't change the size of the element when using border-box. However this only seems to be true if definite dimensions are set as shown in the linked jsfiddle. Height is set, so the bottom padding isn't added on as an extra. But width isn't and right padding has an effect on the visible width of the divs.
Why is this the case? Surely padding should have no effect on the size of the element (unless set to something ridiculous, larger than the element itself), irrespective on whether I've defined a definite width or left it to be calculated?
JSFiddle: http://jsfiddle.net/Astridax/8cd48emn/
Please try and toggle the paddings using dev tools to see what I mean.
As is my understanding, padding shouldn't change the size of the element when using border-box.
This is where you're confused. Here's what the spec has to say on this subject: http://www.w3.org/TR/css3-ui/#box-sizing0
border-box
The specified width and height (and respective min/max
properties) on this element determine the border box of the element.
That is, any padding or border specified on the element is laid out
and drawn inside this specified width and height. The content width
and height are calculated by subtracting the border and padding widths
of the respective sides from the specified ‘width’ and ‘height’
properties. As the content width and height cannot be negative
([CSS21], section 10.2), this computation is floored at 0.
The actual effect of setting box-sizing to border-box is that specified widths will be said to include the border and the padding. The spec says nothing about unspecified widths, which are therefore treated as normal - as wide as they need to be to incorporate both the content and the padding and the border.
Edit:
What you're implying should happen is actually impossible to do, for the following reason. Imagine you have content in a div such that the auto width of the content alone would be 500px exactly. Then throw a 20px padding around that.
#myDiv {
padding: 20px;
width: auto;
}
No problem yet - you have a 540px wide div with the box-sizing at content-box by default.
Okay, so lets change the box-sizing to border-box.
#myDiv {
box-sizing: border-box;
padding: 20px;
width: auto;
}
What you're suggesting should happen is that the padding should now be ignored. So we have a div with 500px worth of content, we're going to now include the padding within that 500px instead of extending the width of the div. But wait - now the content box has shrunk to 460px to allow for the padding and the overall size of the box is 500px. But wait, we're not supposed to be accounting for the padding when calculating the width, so we'd better render the div at 460px right?
You see the problem? You could go on infinitely like this.
I've read that setting the padding property of an element increases both the height and width of the element. This is true when used on an element that is not nested inside any other element. But as soon as I set the padding property of a nested element,say a paragraph nested inside a div, only the height of that nested element increases and the width remains the same.Should it not increase the width too?Also when I specify very large values for padding of the nested element, it expands out of the container element. Can somebody please explain me this behaviour?
You must search google for CSS BOX Model?
The padding area extends the content area with the empty area between
the content and the eventual borders surrounding it. It often has a
background, a color or an image (in that order, an opaque image hiding
the background color), and is located inside the padding edge. Its
dimensions are the padding-box width and the padding-box height.
The space between the padding and the content edge can be controlled
using the padding-top, padding-right, padding-bottom, padding-left and
the shorthand padding CSS properties.
https://developer.mozilla.org/en-US/docs/Web/CSS/box_model