How to remove the space between inline/inline-block elements?

Alternatively, you should now use flexbox to achieve many of the layouts that you may previously have used inline-block for: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Since this answer has become rather popular, I’m rewriting it significantly. Let’s not forget the actual question that was asked: How to remove the space between inline-block elements? I was hoping for a CSS … Read more

How to write a:hover in inline CSS?

Short answer: you can’t. Long answer: you shouldn’t. Give it a class name or an id and use stylesheets to apply the style. :hover is a pseudo-selector and, for CSS, only has meaning within the style sheet. There isn’t any inline-style equivalent (as it isn’t defining the selection criteria). Response to the OP’s comments: See … Read more

Open link in new tab or window [duplicate]

You should add the target=”_blank” and rel=”noopener noreferrer” in the anchor tag. For example: <a target=”_blank” rel=”noopener noreferrer” href=”http://your_url_here.html”>Link</a> Adding rel=”noopener noreferrer” is not mandatory, but it’s a recommended security measure. More information can be found in the links below. Source: MDN | HTML element <a> | attribute target About rel=noopener Opens External Anchors Using … Read more

Recommended way to embed PDF in HTML?

This is quick, easy, to the point and doesn’t require any third-party script: <embed src=”http://example.com/the.pdf” width=”500″ height=”375″ type=”application/pdf”> UPDATE (2/3/2021) Adobe now offers it’s own PDF Embed API. https://www.adobe.io/apis/documentcloud/dcsdk/pdf-embed.html UPDATE (1/2018): The Chrome browser on Android no longer supports PDF embeds. You can get around this by using the Google Drive PDF viewer <embed src=”https://drive.google.com/viewerng/ … Read more

Maintain the aspect ratio of a div with CSS

Just create a wrapper <div> with a percentage value for padding-bottom, like this: .demoWrapper { padding: 10px; background: white; box-sizing: border-box; resize: horizontal; border: 1px dashed; overflow: auto; max-width: 100%; height: calc(100vh – 16px); } div { width: 100%; padding-bottom: 75%; background: gold; /** <– For the demo **/ } <div class=”demoWrapper”> <div></div> </div> It … Read more

How to align content of a div to the bottom

Relative+absolute positioning is your best bet: #header { position: relative; min-height: 150px; } #header-content { position: absolute; bottom: 0; left: 0; } #header, #header * { background: rgba(40, 40, 100, 0.25); } <div id=”header”> <h1>Title</h1> <div id=”header-content”>And in the last place, where this might not be the case, they would be of long standing, would … Read more

What characters can be used for up/down triangle (arrow without stem) for display in HTML?

Unicode arrows heads: ▲ – U+25B2 BLACK UP-POINTING TRIANGLE ▼ – U+25BC BLACK DOWN-POINTING TRIANGLE ▴ – U+25B4 SMALL BLACK UP-POINTING TRIANGLE ▾ – U+25BE SMALL BLACK DOWN-POINTING TRIANGLE For ▲ and ▼ use &#x25B2; and &#x25BC; respectively if you cannot include Unicode characters directly (use UTF-8!). Note that the font support for the smaller … Read more