How to Strongly Force Line-Height in CSS, with No Stretches

How to strongly force line-height in css, with no stretches?

Glyphs (the visual representations of a character) are centered
vertically within an inline box. If the line height is larger than the
content height, half the difference is added as space
at the top; the same amount is also added at the bottom.

That's the case for the main, non bold, text in your example.

When set on a non-replaced inline element, it specifies the height
used to calculate the height of the surrounding line box.

So in the bold text, you'll still have 8.5px above the font-size, which causes the issue.

You can prevent it by setting a line-height smaller than the font-size ( check this demo ). As it's an inline element, and there's no overflow:hidden; it will still be enterely visible, but it won't add any pixel to the rest of the text's line height.

As far as i know, it's not possible to "stretch" the letters, unless you use some CSS3 properties like transform:scale(value) etc.

Reference

---

Code:

<p>ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac <b>ac</b>
ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac</p>

​
CSS:

p {
    line-height:17px;        
    font-size:15px;
    width:150px;
}
b {
    font-size:25px;
    line-height:1px; 
}​

How do I make ::before fill the height?

I found better solution rather than I've provided:

1. I made ::before and label elements displayed inline-block.

2. I set line-height of the label element equals to font-size.

3. I set line-height of the ::before element the same value.

4. Added vertical-align: top; to the ::before element.

body {    background-color: rgb(0,30,60);    margin-left:40px;    margin-right:40px;    margin-top:20px;    color: rgb(250,240,250);    font-family: 'Verdana';    font-size: 35px;}
.datapoint::before {    content: ">>";    background-color:black;    color: white;    font-size: 35px;    display: inline-block;    line-height: 60px;    vertical-align: top;}
.datapoint {    margin-top: 15px;    background-color: red;    max-width: 20em;    white-space: nowrap;}
.label {    font-family:'Courier New';    font-size: 60px;    line-height: 60px;    display: inline-block;    margin-left: 15px;}

<div class="datapoint">        <span class="label">            This is a test.        </span>    </div>

How do I force a DIV block to extend to the bottom of a page even if it has no content?

Your problem is not that the div is not at 100% height, but that the container around it is not.This will help in the browser I suspect you are using:

html,body { height:100%; }

You may need to adjust padding and margins as well, but this will get you 90% of the way there.If you need to make it work with all browsers you will have to mess around with it a bit.

This site has some excellent examples:

http://www.brunildo.org/test/html_body_0.html

http://www.brunildo.org/test/html_body_11b.html

http://www.brunildo.org/test/index.html

I also recommend going to http://quirksmode.org/

How to force child div to be 100% of parent div's height without specifying parent's height?

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721

---

I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.

CSS Image size, how to fill, but not stretch?

You can use the css property object-fit. ("sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.")

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

Keeping a TD HEIGHT fixed so it will not stretch with content of TD's in same table

I don't really know if I understood your question, but this works fine for me... Only force height of A in CSS and B automatically stretch with C, but A stay fixed.

http://jsfiddle.net/z172kxu7/1/

table, tr, td {
    border: thin solid black;
    width: 100px;
}

.fixed {
    height: 10px;
}

---

<table>
    <tr>
        <td class="fixed">A</td>
        <td rowspan="2">Lorem ipsum yolo. Lorem ipsum yolo.</td>
    </tr>

    <tr>
        <td>B</td>
    </tr>
</table>

Make a div fill the height of the remaining screen space

2015 update: the flexbox approach

There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.

Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.

(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.

To check current support you can also see here:
http://caniuse.com/#feat=flexbox

Working example

With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.

html,body {  height: 100%;  margin: 0;}
.box {  display: flex;  flex-flow: column;  height: 100%;}
.box .row {  border: 1px dotted grey;}
.box .row.header {  flex: 0 1 auto;  /* The above is shorthand for:  flex-grow: 0,  flex-shrink: 1,  flex-basis: auto  */}
.box .row.content {  flex: 1 1 auto;}
.box .row.footer {  flex: 0 1 40px;}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box">  <div class="row header">    <p><b>header</b>      <br />      <br />(sized to content)</p>  </div>  <div class="row content">    <p>      <b>content</b>      (fills remaining space)    </p>  </div>  <div class="row footer">    <p><b>footer</b> (fixed height)</p>  </div></div>

CSS force image resize and keep aspect ratio

img {  display: block;  max-width:230px;  max-height:95px;  width: auto;  height: auto;}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p><img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

---

Related Topics