Here's the table cell: https://developers.google.com/+/web/share/#sharelink-sizes
As you see when you use the inspect element feature in Chrome or Firefox, the total width and height of the table cell is calculated as 105px × 85px. However, the cell content (image) is only 64px × 64px and the cell padding is 6px 10px 6px 10px. I don't see any width and height properties in the element style, so where does this extra width and height come from?
It's a table cell, so the browser will automatically distribute space among the cells to fill the width of the table. The exact width will depend upon the contents of all the cells and the width of the table. In this case, the table is set as a percentage width of the browser window, so on my 1920x1080 monitor, it's actually quite a bit bigger than in your screenshot.
Related
How can it be that table element style width shows one number but its actual width is different? Element style says 175px but actually it is 167px
It turned out that if table width is limited then width does not honor the element style and can be smaller.
I have a text input styled with the class:
.my_input{
padding:10px;
font-size:16px;
line-height:16px;
border:0;
}
You would expect the above to render an input field with a height of 36px, however it is rendering a text box as 38px high. If I set the height as a property it works, however I would like to know why it needs the height property set to accurately render it.
See my codepen for an example:
https://codepen.io/jonniejoejonson/pen/Ewmyad
Thanks, J
Your Codepen example defaults to Arial font. If you look in Dev tools (Chrome) you'll see the textbox as inner dimensions of 195x18, with the top and bottom padding of 10px, that's your 38 pixels in height explained.
Now set the .my_input class to use font-family: Tahoma;, now the inner dimensions are 191x19.
Why? Your browser is computing a reasonable value depending on the font size set or inherited on the element.
Excellent deep dive here, https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align.
Here's a key takeaway:
The Arial font describes an em-square of 2048 units, an ascender of 1854, a descender of 434 and a line gap of 67. It means that font-size: 100px gives a content-area of 112px (1117 units) and a line-height: normal of 115px (1150 units or 1.15). All these metrics are font-specific, and set by the font designer.
Note the 1.15 value. If we calculate (font size) 16px x 1.15 the result is 18.4. On Internet Explorer the height of the TextBox element is 18.4px (Chrome displays only 18px, an example of browsers treating this differently).
It's not the font size that's being changed, just the line height of the element.
In summary line-height depends on font-family, font-size and your browser. For this reason height is the more appropriate property to guarantee the result you expect in this case.
As is (roughly) explained in this answer, height is the vertical measurement of the container, and line-height is the distance from the top of the first line of text to the top of the second. line-height is equally divided above and below the text, and on inline elements (like <input>), specifies the height that is used to calculate line box height.
line-height has no influence on height, as can be seen in this fiddle.
Despite you not explicitly specifying a height, an <input> element cannot exist without one, and so it is automatically generated for you. According to MDN, the default height is calculated in the following way:
By default, the property defines the height of the content area. The content area, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player. Its dimensions are the content width (or content-box width) and the content height (or content-box height).
This correlates to roughly 18px on most browsers.
Your <input> defaults to 38px because it inherits the 18px default height, plus the 20px of padding. Adding a custom height attribute overrides the default setting, and thus you end up with an <input> element with a height of 36px.
Hope this helps! :)
Why does Dev Inspector in Chrome shows width of 100% width page in different width than I have on my monitor? I have 1920x1080 monitor and in full screen I don't get 1920 but only 1519 pixels. This number changes by the zoom.
What is reason behind this? It makes hard to code style when I don't have a proper information about a width.
When you give an element a width of 100% in CSS, you’re basically saying “Make this element’s content area exactly equal to the explicit width of its parent — but only if its parent has an explicit width.” So, if you have a parent container that’s 400px wide, a child element given a width of 100% will also be 400px wide, and will still be subject to margins, paddings, and borders — on top of the 100% width setting.
Have a look here for more https://www.impressivewebs.com/width-100-percent-css/
Open this page : http://jsfiddle.net/dwDZx/6/
Resize until red
Continue make the browser smaller
<div id="container">
<div id="div1"><div class="content">one</div></div>
<div id="div2"><div class="content">two</div></div>
Why does div2 jump down a row instead of resizing? How can I solve this?
You are adding margins for the smaller screen size. Set the margins to a percentage and subtract the percentage of the width for the smaller screen size.
So do not set a margin in pixels. but in percentages.
Updated your code at //jsfiddle.net/dwDZx/9/
When the divs are red, there are two relevant constraints that the divs try to follow: width: 48% and margin-right: 10px. If the div is jumping down a row instead of resizing, that means there isn’t enough space for both of them on that row – they are trying to take up more space than is available. Thus, the second div makes a new row for itself so both divs can be as wide as they want. So let’s look at the numbers and see why the divs are asking for too much space.
Load http://jsfiddle.net/roryokane/kZZCh/, which dynamically displays the width of the page and each div, and make the Result panel exactly 400px wide, so the bug shows itself. Now the two divs are 192px wide. That makes sense – 48% of 400px is 192px. The width does not include the margin, which is 10px for each div. So the total width the divs are asking for is (192+10)*2 = (202)*2 = 404 pixels, which is more than the 400px allotted to them. No wonder the divs are wrapping instead of staying on the same row.
So how do you solve this? Dany’s answer suggests changing the margin-right value from a pixel value to a percent value. But that is only one possible solution. Finding the best solution depends on why you chose the two specific numbers in width: 48% and margin-right: 10px, and which number is more important to keep. If you need the width to remain at 48%, consider whether you want to keep a fixed margin width or switch to a flexible margin width. If you you still want a fixed width, use margin-right: 8px. If you want a flexible width, use margin-right: 2% (Dany’s solution). On the other hand, if you need the right margin width to remain at 10px, then for the width, use width: 47.5%. All of these values ensure that even when the page is only 400px wide, the divs stay on the same row.
I have set table-layout: fixed, width and padding for column but real width is higher per 22px than it should be. What can cause this?
You have set the table width to 1000px and cell widths in pixels, too, so that they do not add up to 1000px. Obviously, a browser has to make the cells wider or to ignore the setting on the table as a whole. It is better that you as an author make such a choice, e.g. by simply removing the width setting on the table.