Why is the box around my paragraph tag so large? I suspect this could be why I am unable to move the <p> tag down with margin-top: 50px;
.train p {
margin: 0;
font-size: 2.5vw;
}<div class="train">
<p class="train">In Training</p>
<hr>
</div>The <p> element is considered a block-level element. These elements take up the full width available and start on a new line within their containing parent. To style specific parts, consider using a span element for targeted styling.
Here is a simple example for you to observe the issue (also useful for debugging HTML/CSS). The <p> and <div> elements are by default considered as block level.
I highly recommend spending 3 minutes to go through the following link:
REF:
p.train {
margin: 0;
font-size: 2.5vw;
background: red;
}<div>
<p class="train">In Training</p>
<hr>
</div>To resolve this, set the p element to inline-block.
You can also use a span, which is an inline element:
p.train {
margin: 0;
font-size: 2.5vw;
background: red;
display: inline-block;
}
.green {
margin: 0;
font-size: 2.5vw;
background: red;
}<div>
<p class="train">In Training</p>
<hr>
<span class="green">In Training</span>
</div>After carefully selecting a Google Web Font to use as the main font for my website, I noticed that it appears slightly different in terms of dimensions and spatial conformations when displayed on both Mac and Windows computers. For more information about ...
My website is currently structured with div containers in the following order: Less important left side bar Less important right side bar The core center content at last I am concerned about the impact on SEO as the core content comes after the sidebars ...
I have developed a quiz application similar to Buzzfeed with four answer options for each question. The layout on mobile devices is satisfactory, displayed in a 2x2 grid. However, when viewing the app on desktop screens, the answers appear horizontally in ...
I am facing an issue with my component's CSS structure and import method. About/style.css .AboutContainer { # Some style } p > code { # Some style } When importing the CSS in the component: About/index.js import './style.css&apos ...
I am currently using the Cardiff font in a project and attempting to apply the style text-decoration:underline to it. While this works perfectly in Chrome (Version 35.0.1916.114), in Firefox (Version. 29.0.1) the underline appears to be crossing through t ...
I've been struggling to find a solution to this issue, but here's the gist of it: I have a button that allows users to add a question and answer pair one at a time by clicking on an "Add Question" button. This is achieved through the append featu ...
Struggling to make this jQuery function properly. I have a form with all fields contained in a div.form-group. The subscribe button is identified by the id subscribe. I'm aiming to hide the form fields when clicked, but my JavaScript doesn't see ...
Currently implementing the Slick Slider on a WordPress website. The slider is designed to display 3 columns at a screen size of 1024px and above. When the screen size drops below 1024px, the slider adjusts to show 2 columns, and on mobile devices, it swit ...
Here is my code snippet that generates 4 spans within a class. When a user clicks on a span, it changes color to indicate that it has been clicked. <head> <style> .tagger1010 span { padding: 6px 10px; ...
Having attempted to solve this problem for the third time, I find myself unable to come to a final solution on my own. I would greatly appreciate it if someone could offer their insights on the issue at hand. Let's consider the following HTML structu ...
I've been tasked with maintaining an old website that went offline due to script errors. I managed to resolve most of the issues in the script, but there's one error that's giving me trouble. The site is showing a syntax error that says "une ...
I'm currently working on creating a rectangular button using HTML and CSS. The challenge I'm facing is ensuring that the width of the button remains consistent regardless of the amount of text it contains. Whether it's just a few words or mu ...
Being new to javascript, I've successfully combined two functions that control video playback, but they seem to be conflicting with each other. The first function is designed to offer custom pause and play controls for the video // VIDEO CONTROLS STA ...
<tr id="computer-report-tbl-row-0" ng-repeat="item in table.data.items" class="ng-scope" style=""> <td id="column-name-0" class="table-cell-md" sc-ellipsis-title="" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> ...
After coming across this particular inquiry, I discovered that in the past, styling the line break (BR) tag with CSS was not possible. Nevertheless, thanks to the latest browsers, this limitation is a thing of the past now. My aim is to give certain line b ...
For my project, I need to display the same image 24 times with a 3x8 matrix on an A4 size page using a foreach method. The issue I'm encountering is that I have to manually add space between each row and column, but it cannot cause the page to break. ...
I am currently utilizing Material-ui. Following the project build with npm run build, I encounter a blank page when running npm run serve. I attempted to set homepage: "./" in the package.json as suggested here, however, it still displays a blank ...
Need help with inserting JavaScript code from Google: <script type='text/javascript'> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1362706866260-0'); }); </script> into existing JavaScript / HTML code: va ...
I am looking to change the appearance of my Instagram icon when hovering over it. I want the background to turn white and the icon to become colored. Here is my code snippet from Footer.js : <a href="https://www.instagram. ...
Is there a solution for sending real-time updates to connected clients every second without using the setInterval() function in nodejs and socket.io? Please provide an alternative method that fits my specific scenario. ...