As I enlarge the font size, the border around the div also expands

Can someone explain why the size of the div border increases along with the font size?

If you'd like to see an example, check out this link to a jsFiddle:

LINK TO JS FIDDLE: http://jsfiddle.net/krishna22211/m14qms52

Answer №1

Em units are calculated based on the parent font size. This means that as the parent font size changes, the em units will adjust accordingly, affecting elements like borders.

To avoid this automatic resizing of borders, it is recommended to use fixed units for border sizes instead of em units.

Answer №2

Basically, the use of Em as a unit in web design is tied to various other measurements, with font size being particularly important. Adjusting one size or measurement can impact others in the design. I tend to favor using ems because it has minimal impact on the design when resolution is altered or when zooming in (websites using em tend to function better in Firefox when zoomed in or out).

Answer №3

When setting min-height to 100px, there is no defined maximum limit and the height adjusts automatically.

max-height:100px;overflow-y:scroll;

This prevents the border from increasing.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Replace character within a table using jQuery

Below is the table content: <table> <tr> <td>"James"</td> <td>"do"</td> <td>"you</td> <td>"like</td> <td>"your life"</td> </tr> </table> <butt ...

Adjust the text color of a particular word as you type using the contenteditable property set to "true"

I'm attempting to jazz things up a bit. For instance, I have a div that is set as contenteditable="true". What I want to achieve is changing the color of a specific word I type while writing. In this case, let's say the word "typing" sh ...

Display 'Div 1' and hide 'Div 2' when clicked, then reveal 'Div 2' and hide 'Div 1' when a different button is clicked

I need help figuring out how to make two separate buttons work. One button should display 'Div 1' and hide 'Div 2', while the other button should show 'Div 2' and hide 'Div 1' when clicked. My knowledge of jquery an ...

Can anyone explain how to successfully implement AJAX data in a PHP file?

I've been struggling to transfer data from my JavaScript file to a PHP variable. I've spent hours searching for solutions, but none seem to apply to my unique code. Here's the JavaScript code I'm working with... $(function(){ ...

Exchange selection choices among harvested selected boxes

In my project, I am working on swapping all the options between two select boxes. The specific scenario I am dealing with involves recording details of phone calls. These calls can either be inbound or outbound. For outbound calls, I have a 'caller&ap ...

Issues regarding the sizing of fonts on mobile devices

Struggling to create a responsive site that looks good on high dpi mobile devices? You're not alone. No matter how you adjust your h2 and p text sizes, they seem to be the same size when viewed in portrait mode on certain devices like the Galaxy S4. E ...

Tips on accessing dictionaries with multiple values in JavaScript

I am struggling with a particular dictionary in my code: {1:['a&b','b-c','c-d'],2:['e orf ','f-k-p','g']} My goal is to print the key and values from this dictionary. However, the code I att ...

Implement a loading bar on the entire page in Vue.js while a request is being made

There is an "edit" button on my page which allows me to edit certain elements and either save or close without saving. I would like to implement a loading bar that displays when the user clicks the "save" button, indicating that the data is being processe ...

Data structure for Highcharts:

Recently, I've been experimenting with Highcharts (http://www.highcharts.com) in a test application built on rails 3.1.1 and HAML. As someone who is still new to JavaScript, I'm striving towards achieving a seamless integration of Highcharts. Wi ...

Refreshing various innerHTML elements using a universal function

I'm attempting to consolidate several similar functions into one, but I'm encountering some challenges. Below is an example of one of the original functions that is called by a button press: function ADD_ONE(Variable_Name){ Variable_Name += ...

Using Node.js to generate several MongoDB documents by iterating through JSON data submitted via POST requests

When a webpage sends JSON data via POST to my Node.js App (MEAN-environment using Mongoose), the format of the JSON file is as follows: Firstname: 'XY', Surname: 'asd', Articles: [ { title: '1', description: ...

Simple request results in an error

I have been experimenting with the Electrolyte dependency injection library, but I am encountering an error even when trying a simple script that requires it. I haven't come across any discussions or problems similar to mine in relation to this issue ...

What could be causing the error message "CSRF token missing or incorrect" to appear?

I am facing an issue with returning a value from a View function in Django. This particular function is called from a JavaScript code using Ajax, but I'm encountering an error that says 'Forbidden (CSRF token missing or incorrect)'. JavaScr ...

Is there a workaround for unresolved symlink requirements when using npm link?

Creating an NPM package often involves using the following: npm link This allows for making modifications to a package called <myPackage> during development without constantly having to publish and unpublish! Developers can make changes locally and ...

Expanding the padding of the selected item to create more breathing room

Upon examining the following: https://jsfiddle.net/h8kmove5/27/ Let's say you select 9 at the bottom. The display shows 8 9 10. My intention is to create some additional space on either side of 9, or any other active item for that matter. This way, ...

I am facing difficulties with the header in CSS as it is not resizing properly

I'm having trouble getting my mobile-first design to work properly because the header doesn't resize in mobile view. I'm satisfied with how it looks in full-screen, but I haven't been able to make any media queries work. You can downloa ...

Preventing clicks within an iframe

Within an iframe, I have HTML content that includes hyperlinks. I need to prevent clicks on these hyperlinks. I managed to accomplish this using jQuery as shown below. However, I prefer not to use jQuery for this task. How can I achieve the same result ...

I've been encountering a recurring issue of receiving NaN followed by a number in React. Any suggestions on how to resolve

click here to see the image const number = parseInt(props.detail.price,10) const toLocale = number.toLocaleString("ko-KR") console.log(toLocale) return ( <div> <Descriptions title="Product ...

Result being returned from XMLHTTPRequest function

I've been experimenting with an XMLHttpRequest and managed to get the basic code functioning properly. However, I'm struggling to create a function that will return a boolean variable indicating whether it has worked or not: var xhr = new XMLHtt ...

Uniform selection frame width across nested list elements

I want to ensure that the width of the selection frame for all nested ul li elements is consistent, just like in this example. When hovering over an element (making the entire line clickable), I don't want any space on the left. Currently, I am using ...