The parent font size is influenced by the font size of the child element

I am encountering an issue with my code that seems to be quite simple. Here is the code snippet:

<p>
  <h3>Title is here</h3>
  This is the paragraph
</p>

Here is the CSS:

h2 {font-size:2.3em;}
h3 {font-size:1em;}
p {font-size:0.5em;}

Even though I have set different font sizes for each element in the CSS, the <p> always ends up using the font size of the <h3>. I cannot simply put the <h3> tag on the outside due to restrictions in this case. Can anyone explain why this is happening?

htmlcss

Answer №1

The h3 element should not be placed inside a paragraph tag as it is not the correct way to structure your markup. I suggest reorganizing your code and moving the h3 element outside of the paragraph.

Answer №2

Although it is generally advised against using such markup (as most people here would concur), I will provide you with a solution.

Assuming your base font size is 12px, when the browser tries to fix this incorrect markup by removing the h3 from the p, your p { font-size: 0.5em; } rule does not take effect because it is no longer within a p. As a result, the text size does not become 6px as anticipated. In my example, the h3 now inherits the base font size of 12px. Since 1em x 12px = 12px, using 1em does not alter the text size.

This is how the browser is handling it:

<p></p>
<h3>Title is here</h3>
This is the paragraph
<p></p>

Therefore, whatever the parent element is and its font size dictate the font size of the text string This is the paragraph.

Hence, the straightforward solution is to increase the em value for your h3. However, there may still be unexpected outcomes in certain scenarios due to other CSS rules impacting the base font size caused by the improper markup and the actions of the browser.

Answer №3

Let's address the issue at hand:

My diagram with a freehand circle clearly shows that the <h3> element is not nested within the <p> element as intended. This results in the text that should be inside the <p></p> tags being placed directly in the body, causing the CSS styles for the <p> element to not be applied.

The solution lies in adjusting your markup accordingly.

If altering the HTML structure is out of the question, you could consider this approach instead:

See Technically Working Example

h2 {font-size:4.6em;}
h3 {font-size:2em;}
body{font-size:0.5em;}

However, I strongly advise against this workaround...

Answer №4

After setting the font-size using px and including !important at the end, all issues were resolved.

Answer №5

Take a look at this code snippet: http://jsfiddle.net/peW3p/. It's displaying the generated HTML from the body and you can observe what exactly is happening. The content within the <p> tag is getting extracted from it, causing the issue you're facing. As suggested by @KruegerDesigns here, if you want to have more control over how your CSS behaves, consider using elements other than an <h3>.

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

Exploring the Vertical Metrics of Various Typeface Styles

I'm encountering a problem and struggling to find a solution. I'm in the process of creating a website and incorporating various fonts. My goal is to ensure that every font appears visually similar to the others and align perfectly at the base. ...

htmlcssfontswebfonts

Is the presence of a 'disabled' attribute on a non-input element enough to render your document invalid in HTML?

Originally intended for <input/> elements, the disabled attribute raises a question when applied to non-input elements. Could this potentially lead to document invalidation? ...

htmlvalidationattributes

Having trouble getting my absolute div to center?

Check out this problem on my server at THIS LINK .login-div{ background: #fff none repeat scroll 0 0; height: 500px; left: 50%; width: 500px; right: 0; z-index: 99999; top: 20%; position: ...

htmlcss

Tips for transforming numerical date data into a string format

Is there a method to convert the numeric month in a table into a string format? <table style="width: 100%;"> <tr> <th>Date</th> <th>Total</th> </tr> <tr> <td id="date ...

javascripthtml

Copying an HTML <div> and inserting it into a database involves capturing the input text value as part of the process

How can I duplicate a content div in jQuery using the clone() method, while also incorporating the value of an input text? Is this the correct approach, or is there a better alternative? ...

phpjqueryhtmlmysql

Are you curious about the array of elements in React's carousel?

I'm currently in the process of constructing a website using React, and I have a specific challenge related to the "news" section. Within this section, I have a list of three components that represent different news items. These components are housed ...

javascriptcssreactjsnpmreact-router

Uploading a File to a Remote WCF Service via jQuery AJAX on Different Domains

I am currently facing some difficulties in achieving the following task and would really appreciate any guidance you can provide. My goal is to upload a file from my HTML5 site to a cross domain WCF service hosted in IIS 7.5. Additionally, I need to send ...

c#jqueryasp.nethtmlwcf

Retrieving text from a draggable div using jQuery

I have a draggable div that I can move over another element with the class .outerDiv which contains text content. Is there a way for me to retrieve the text from .outerDiv that overlaps with the draggable div? $(".outerDiv .isStore").draggable({ contain ...

javascriptjqueryhtmlcss

Altering the submit button's value following the submission of a form

My goal is to create a form with a submit button that, when clicked, will insert the value of the button into a database and change the text on the button to inserted. If the insertion violates any constraints, then the text on the button should be changed ...

phphtmlajax

The Bing map control fails to adhere to the div element

After visiting , I successfully generated a map using the following HTML code: <div class="fluid-row" style="height:300px;"> <div class="span12"> <div id="prdmap" class="map"> </div> </div> Here is the accompanying J ...

htmlajaxbing-maps

Issue with menu display on Internet Explorer

Having some trouble with IE. My menu displays fine in Firefox and Chrome, but IE is causing issues... It seems that IE isn't rendering the <li> tag properly, so my dropdown menu isn't functioning in IE. Can anyone assist me? Here's t ...

phphtmlcss

Tips for fixing the issue of disappearing top margins in elements while using CSS3 Pie in Internet Explorer 7

Hey there! I've been experimenting with a lot of CSS3 effects, but I'm running into issues trying to get the same effects to work on IE 7 and 8. I've been attempting to use CSS3 Pie to help with this. While CSS3 Pie has worked well for som ...

htmlcsscss3pie

Steps on displaying a fresh div containing an identical input box within the original parent div

I am looking to create a search feature with a text box and popup aligned at the top left corner of the window. The navbar already contains a search input box, but when clicked, I want to display another div that mirrors the width and content of the origin ...

htmlcssbootstrap-4

Display temporary image until real image loads within ng-repeat angularjs

I am looking to display a placeholder image while the actual image is being loaded. I have tried using the ng-image-appear plugin. The issue I'm facing is that the placeholder image does not appear for img elements inside ng-repeat, although it works ...

javascripthtmlangularjsimage

Creating a default menu within a specific route in Ember.js is a crucial step in

I have created a JSBin code for my Ember.js application which can be found here: When I click on Item A, I want the ABCD menu on the left to remain visible and not disappear. Thank you. ...

javascriptjquerycssember.js

Align the content of a collapsed bootstrap row vertically

In a row, I have two columns, each containing their own row. When the page width hits the 'xs' break-point, the left column's row will stack its columns on top of each other. The right column is taller than the left column, which leaves a l ...

twitter-bootstrapcssflexboxbootstrap-4

Displaying both input fields and buttons side by side on mobile devices using Bootstrap

I am in the process of creating a navbar that includes select, input, and button elements. Below is the code I have written: <nav class="navbar sticky-top navbar-light p-0"> <div class="collapse navbar-collapse search-bar show p-4" id="navbarSupp ...

csstwitter-bootstrapbootstrap-4

What significance do the blank quotes hold in terms of value?

Is it possible to enter multiple values for the "favoriteCities" field since the value is empty? <input name="favoriteCities[]" value=""/> ...

html

Move the image inside the box without directly following the mouse cursor, but at a slightly faster pace

I am facing an issue with a Vue component that allows me to zoom in on an image and move it around the container. The problem is, when the image is zoomed in, it moves faster than the mouse due to using the scale transform. Additionally, I noticed that cl ...

javascriptcssvue.js

When you click the button, the page refreshes with no content

Every time I click on a button, an empty page reloads after invoking the button's onClick event. The code snippet on the page is as follows: <html> <head></head> <body>2015</body> </html> I am ...

c#htmlasp.net