当我更改字体大小时，它会更改边距/填充

发布于 2025-02-06 14:34:48 字数 1951 浏览 2 评论 0原文

我目前正在为我的网站编码头版。我希望所有文本都彼此嵌入式，但是当我增加一个字体大小时，它会在其周围增加填充或边距，将其向右移动一点，然后将其下方的文本推向下方。

有什么办法解决这个问题吗？

@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap');

@font-face {
    font-family: Roboto-Black;
    src: url(/fonts/Roboto-Black.ttf);
}
:root {
    --black: Roboto-Black 
}



/* INDEX PAGE */
body,html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.index-bg {
    background-image: url(/images/joshua-sortino-71vAb1FXB6g-unsplash.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
    z-index: 1;
}

.main-fcs {
    position: absolute;
    top: 30%;
    left: 10%;
    transform: translate(-10%, -30%);
    font-size: 30px;
}

.main-fcs h1 {
    font-family: var(--black);
}

<!DOCTYPE html>
<html lang="en" style="max-width: 100%; overflow-x: hidden;">
<head>
    <title>website</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta data-hid="description" name="description" content="website">
</head>
    <body>
        <div class="index-bg"></div>
        <div class="main-fcs">
            <h1>Custom Websites</h1>
            <p>Your fully custom website awaits...</p>
        </div>
        <div class="main-fcs-btn">
            <div class="fcs-btn-bck">
                <h2>Get Started</h2>
            </div>
        </div>
    </body>
</html>

原文

I am currently coding a front page for my website. I'd like all the text to be inline with each other, but when I increase the font size of one, it adds a padding or margin around it, moving it a little to the right and pushing the text below it down.

Is there any way to solve this?

@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap');

@font-face {
    font-family: Roboto-Black;
    src: url(/fonts/Roboto-Black.ttf);
}
:root {
    --black: Roboto-Black 
}



/* INDEX PAGE */
body,html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.index-bg {
    background-image: url(/images/joshua-sortino-71vAb1FXB6g-unsplash.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
    z-index: 1;
}

.main-fcs {
    position: absolute;
    top: 30%;
    left: 10%;
    transform: translate(-10%, -30%);
    font-size: 30px;
}

.main-fcs h1 {
    font-family: var(--black);
}

<!DOCTYPE html>
<html lang="en" style="max-width: 100%; overflow-x: hidden;">
<head>
    <title>website</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta data-hid="description" name="description" content="website">
</head>
    <body>
        <div class="index-bg"></div>
        <div class="main-fcs">
            <h1>Custom Websites</h1>
            <p>Your fully custom website awaits...</p>
        </div>
        <div class="main-fcs-btn">
            <div class="fcs-btn-bck">
                <h2>Get Started</h2>
            </div>
        </div>
    </body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

感情洁癖 2025-02-13 14:34:48

我想我有解决方案，我只是删除了body {}选择器，并给出了h2选择该位置的选择属性，如果您调整了页面大小，则它将在同一个地方。我给出了h2给出了其他类的类似属性。

@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap');

@font-face {
    font-family: Roboto-Black;
    src: url(/fonts/Roboto-Black.ttf);
}
:root {
    --black: Roboto-Black 
}



/* INDEX PAGE */
html {
    height: 100%;
    margin: 0;
    padding: 0;
  
}

.index-bg {
    background-image: url(/images/joshua-sortino-71vAb1FXB6g-unsplash.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
    z-index: 1;
}

.main-fcs{
    position: absolute;
    top: 30%;
    left: 10%;
    transform: translate(-10%, -30%);
    font-size: 30px;
    
}
h2 {
position: absolute;
   top: 50%;
    left: 10%;
    transform: translate(-10%, -30%);
   
}

.main-fcs h1 {
    font-family: var(--black);
}

<!DOCTYPE html>
<html lang="en" style="max-width: 100%; overflow-x: hidden;">
<head>
    <title>website</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta data-hid="description" name="description" content="website">
</head>
    <body>
        <div class="index-bg"></div>
        <div class="main-fcs">
            <h1>Custom Websites</h1>
            <p>Your fully custom website awaits...</p>
        </div>
        <div class="main-fcs-btn">
            <div class="fcs-btn-bck">
                <h2>Get Started</h2>
            </div>
        </div>
    </body>
</html>

I think I have the solution, I simply removed the body {} selector and gave the h2 selector properties that determine its position, if you resize the page it will be in the same place. I gave h2 similar properties that was given to the other class.

@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap');

@font-face {
    font-family: Roboto-Black;
    src: url(/fonts/Roboto-Black.ttf);
}
:root {
    --black: Roboto-Black 
}



/* INDEX PAGE */
html {
    height: 100%;
    margin: 0;
    padding: 0;
  
}

.index-bg {
    background-image: url(/images/joshua-sortino-71vAb1FXB6g-unsplash.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
    z-index: 1;
}

.main-fcs{
    position: absolute;
    top: 30%;
    left: 10%;
    transform: translate(-10%, -30%);
    font-size: 30px;
    
}
h2 {
position: absolute;
   top: 50%;
    left: 10%;
    transform: translate(-10%, -30%);
   
}

.main-fcs h1 {
    font-family: var(--black);
}

<!DOCTYPE html>
<html lang="en" style="max-width: 100%; overflow-x: hidden;">
<head>
    <title>website</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta data-hid="description" name="description" content="website">
</head>
    <body>
        <div class="index-bg"></div>
        <div class="main-fcs">
            <h1>Custom Websites</h1>
            <p>Your fully custom website awaits...</p>
        </div>
        <div class="main-fcs-btn">
            <div class="fcs-btn-bck">
                <h2>Get Started</h2>
            </div>
        </div>
    </body>
</html>

回复收藏 0 原文

~没有更多了~